web端ant-design-vue Upload 手动实现文件上传使用小节

 　　web端ant-design-vue Upload 手动实现文件上传使用小节。最近在项目开发中用到了手动实现文件上传的组件，之前都是自动上传把返回的文件信息保存到服务器。手动上传相对复杂一下，我把遇到的一些问题整理记录一下，有需要的朋友可以避免走弯路！

1、文件上传需要用formdata格式，需要手动配置headers: {    'Content-Type': 'multipart/form-data'},

2、文件上传不需要数据转换

Axios.interceptors.request.use((config) => {
    config.transformRequest = (data, headers) => {
        // 如果需要上传文件，需要修改接口的headers.type = 'formData'
        if (headers['Content-Type'] === 'multipart/form-data') {
            return data
        }
        if (data) {
            return stringify(data);
        }
    };
    return config;
});

 3、最重要的是需要用formdata格式上传二进制数据流，而不是对象

<a-upload-dragger ref="uploadDraggedRef"
    v-model:fileList="data.fileList" :maxCount="1"
                  :fileList="data.fileList"
    name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :multiple="false" :beforeUpload="beforeUpload"
                  @remove="handleRemove"
>
  <p class="ant-upload-drag-icon">
    <!-- 使用普通的img标签加载本地图片 -->
    <img :src=fileImage style="width: 48px;height: 48px;" alt="" />
  </p>
  <p class="ant-upload-text">选择文件</p>
  <p class="ant-upload-hint">
    仅支持Excel类型文件
  </p>
</a-upload-dragger>

const onSubmit = () => {
  fileImportFormRef.value.validateFields().then(async () => {
    const formData = new FormData();
    formData.append('date', data.date);
    formData.append('file', data.fileList[0].originFileObj);
    const [err, res] = await to(ImportStudentWorkTime(formData));
    if (!err && res.code === '0x000000') {
      message.success('导入成功');
      //刷新数据列表
      emit('refreshData', true)
      resetForm();
    }else {
      message.error(res.msg)
    }

  }).catch((errorInfo: any) => {
    console.log('errorInfo', errorInfo);
  });
};