vue2+antdv+axios上传文件踩坑

在使用antdv框架a-upload组件上传excel文件时，接口报错：

Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

本以为是接口问题，调试发现浏览器network中并未将file数据传过去。经查阅资料并尝试，最终得以解决。解决方案如下：

1. 定义接口

export function updateAttributes(data) {
  return request({
    url: "/tag/uploadAttributes",
    method: "post",
    data,
    transformRequest: [
      function () {
        return data;
      },
    ],
  });
}

备注：
1.transformRequest这部分非常重要，否则formdata会被转格式；
2.无需设置headers: {'Content-Type': 'multipart/form-data'}，上传文件会自动改变请求头，如下图：

2. 调用

const formData = new FormData();
formData.append("file", fileList[0]);
this.confirmLoading = true;
updateAttributes(formData)
.then((res) => {
  this.$emit("changeUpload", true);
  this.confirmLoading = false;
  this.fileList = [];
  if (res.code === 200) {
    this.$message.success(res.msg);
  } else {
    this.$message.error(res.msg);
  }
})
.catch((err) => {
  self.target.blur(); // 失去焦点
  this.confirmLoading = false;
  // this.$message.error(err);
});

备注：
fileList为文件数据所在数组，因为我是单文件上传就取fileList[0]

3. 上传结果