vue2+elementui上传文件-同时上传表单数据和文件

问题

前端接口上传文件的时候，通常会将请求header的content-type设置为:multipart/form-data, 或者form表单提交表单提交的时候将enctype设置为"multipart/form-data" 。后端收到请求时由于请求体有@RequestBody 注解标识，通常会用application/json, application/xml处理content-type，此时会报编码格式的问题。

解决

const formData = new FormData();
// file 为想要上传的文件
formData.append("file", this.file);
formData.append(
  "name",
  new Blob([this.form.name], {
    type: "application/json",
  })
);
formData.append(
  "age",
  new Blob([this.form.age], {
    type: "application/json",
  })
);
formData.append(
  "hobby",
  new Blob([this.form.hobby], {
    type: "application/json",
  })
);
// 发送请求
addUser(formData).then((res) => {
  if (res.code === 0) {
    this.$message.success(res.msg);
  } else {
    alert("新增失败");
  }
});