antd 使用 —— upload组件使用

<Upload accept='.xls,.xlsx' beforeUpload={onBeforeUpload} customRequest={(e) => {}} maxCount={1} onChange={onUpload} showUploadList={false}>
  <Button loading={uploading} icon={<UploadOutlined />}>
    上传文件
  </Button>
</Upload>

1. accept 限定选择文件类别为excel的两种格式

接受文件上传的类型 string '.xls, .xlsx'

2. beforeUpload 阻止文件上传

上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传

如果不写BeforeUpload会默认选择完文件直接上传，所以我们需要在BeforeUpload里return false来实现手动点击按钮进行上传。

const onBeforeUpload = (file: RcFile) => {
    if (file.size <= 10 * 1024 * 1024) return true;
    message.error('文件不能超过10MB');
    return false;
};

3. onChange

上传文件改变时的回调

const onUpload = ({ file }: UploadChangeParam<UploadFile>) => {
if (file.status === 'uploading') {
setUploading(true); //state uploading 加载中

      bookResource
        .uploadBook(file)
        .then(
          () => message.success('上传成功'),
          () => message.error('上传失败')
        )
        .then(() => setUploading(false));
    }

};

4.调用后端接口，上传文件

bookResource services

    uploadBook = async (file: UploadFile) => {
      const formData = new FormData();
      formData.append('files', file.originFileObj);

      return $http.post(url, formData);
    };

customRequest 通过覆盖默认的上传行为，可以自定义自己的上传实现

action 上传的地址

maxCount 限制上传文件的数量

showUploadList 是否展示文件列表, 可设为一个对象，用于单独设定 默认true

FormData

初始化

const formData = new FormData()

使用方法

formData 里面存储的数据形式，一对 key/value 组成一条数据， key是唯一的 ，一个key可能对应多个value；

1. 获取值 get(key)/getAll(key)
2. 添加数据 append(key, value)
3. 设置修改数据 set(key, value)
4. 判断是否存在数据 has(key)
5. 删除数据 delete(key)