54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Upload } from 'tdesign-mobile-react';
|
|
import type { UploadFile as TDesignUploadFile } from 'tdesign-mobile-react/es/upload/type';
|
|
import { uploadImage } from '@/api/upload';
|
|
|
|
interface UploadImageProps {
|
|
value?: string[];
|
|
onChange?: (urls: string[]) => void;
|
|
max?: number;
|
|
accept?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const UploadImage: React.FC<UploadImageProps> = ({ value = [], onChange, ...props }) => {
|
|
// 处理上传
|
|
const requestMethod = async (file: TDesignUploadFile) => {
|
|
try {
|
|
const url = await uploadImage(file.raw as File);
|
|
return {
|
|
status: 'success' as const,
|
|
response: {
|
|
url
|
|
},
|
|
url,
|
|
};
|
|
} catch (e: any) {
|
|
return {
|
|
status: 'fail' as const,
|
|
error: e.message || '上传失败',
|
|
response: {},
|
|
};
|
|
}
|
|
};
|
|
|
|
// 处理文件变更
|
|
const handleChange = (newFiles: TDesignUploadFile[]) => {
|
|
const urls = newFiles.map(f => f.url).filter((url): url is string => Boolean(url));
|
|
onChange?.(urls);
|
|
};
|
|
|
|
return (
|
|
<Upload
|
|
files={value.map(url => ({ url }))}
|
|
requestMethod={requestMethod}
|
|
onChange={handleChange}
|
|
multiple
|
|
accept={props.accept}
|
|
max={props.max}
|
|
disabled={props.disabled}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default UploadImage;
|