ImageUploader的使用

韦嘉颖
2023-12-01
import { ImageUploader } from 'ant-mobile'
const [fileList, setFileList] = useState<ImageUploadItem[]>([]);
  const beforeUpload = (files: File[]) => {
    return files.filter(file => {
      if (file.size > 3 * 1024 * 1024) {
        Toast.show('请选择小于 3M 的图片')
        return false
      }
      return true
    })
  }

	// 要求返回一个promise对象
  const Upload = async (file: File): Promise<ImageUploadItem> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        resolve({
          url: reader.result as string,
        });
      };
    });
  };

  return (
    <div className={styles.home}>
      <Button color="success">按钮</Button>
      <ImageUploader 
		value={fileList} 
		upload={Upload} 
		beforeUpload={beforeUpload} 
		onChange={setFileList} maxCount={5} multiple 
       />
    </div>
  );
 类似资料: