记录-Antd upload组件实现手动上传文件

Antd默认状态

默认情况下，点击“拖拽文件上传”框之后选择文件会自动默认触发action，将文件上传到服务器，之后返回一个url。

想要的效果

选择文件之后，已选文件列表展示，点击确定按钮后触发action，上传到服务器。

1、beforeUpload

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

在此钩子函数中返回false，阻止默认的上传行动：

    beforeUpload(info: any) {
        //文件类型校验
        const fileType = info.name.split('.').pop();
        if (fileType !== 'xlsx') {
          message.error(`上传失败：上传文件格式非.xslx`);
        }
        return false;
    }
复制代码

2、onChange

上传文件改变时的状态

在此钩子函数中改变文件状态，使其显示上传成功的正常状态：

    onChange(info: any) {
        const fileType = info.file.name.split('.').pop();
        if (fileType === 'xlsx') {
          setConfirmLoading(false);
          setFileList(info.fileList.slice(-1));//限制只上传一个文件
          info.file.status = 'done';//更改文件状态
        }
      }
复制代码

3、确定按钮触发上传活动

    const handleOk = async () => {
      if (fileList && fileList.length) { //检验是否有上传文件
        setConfirmLoading(true);
        let formData = new FormData();
        formData.append('file', fileList[0].originFileObj);
        const res = await formulaRegular.uploadFile(formData);
        if (res) {
          message.success('规则上传成功！');
          handleCancel();
        }
      } else {
        message.error('请上传文件后再提交！');
      }
    };
复制代码

new FormData()

FormData 对象的使用：

1. 用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
2. 异步上传二进制文件。

我们就需要将file转化成二进制文件的格式作为参数传递给后端。

• 创建FormData对象

let formData = new FormData();
复制代码

• 通过append添加属性

formData.append('file', fileList[0].originFileObj);
复制代码

此处需要注意，直接用fileList[0]将会添加属性不成功：

可能因为antd对原有的文件参数包装了一层导致的不成功。

• 读取属性

直接console.log(formData)会显示空，获取formData中的属性应该使用formData.get(keyName)

4、触发上传，调接口

export async function uploadFile(params: any) {
  return axios({
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    url: `${__HOST}/upload/flow/analytics`,
    method: 'post',
    data: params,
    errorTitle: '批量上传文件'
  });
}
复制代码

一定要设置Content-Type为multipart/form-data，同时要注意，data中params必须直接是formData，不能包裹在数组或者对象中，不然会添加参数不成功。