axios 怎么在Post请求中，同时传递文件和对象

Question

addAppVersion(formdata: any, file: any) {
    const data = new FormData();
    data.append('appfile', file);
    data.append('appVersion', JSON.stringify(formdata));
    //Object.entries(formdata).forEach((arr: [string,any]) => {data.append(arr[0], arr[1]);})
    return new Promise((resolve: Function,reject: Function) => {
      axios({
        url:'/app/versionManager/addAppVersion',
        method:'post',
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        data: data
      }).then((res: any) => {
        resolve(res.data)
      }).catch((err: any) => {
        reject(err)
      });
    })

formData.append(name, value) 表单的值。是 USVString 或 Blob (包括子类型，如 File)。所以上述的date需要被JSON.stringify，才能存入FormData字符串。我这里想在请求前进行appVersion值的反序列化，但是尝试使用transformRequest和拦截器都失败了。

这样请求的参数appVersion是一个JSON字符串，能不能做到直接传递一个对象参数呢？或者用其他方式传递file？

Answer 1

用这个就行了，多文件和参数直接一起传了，哪有那么费事。

uploadData(files, nowDate, type) {
let nowssss = new Date().getTime();
    let formData = new FormData();
    if (files.length !== 0) {
      for (let i = 0; i < files.length; i++) {
        let file = {
          uri: files[i].path,
          type: files[i].mime, 
          name: nowssss + ".jpg",
        };
        formData.append("fileName", file);
      }
    }
    formData.append("type", type);
    formData.append("date", nowDate);
    formData.append("id", this.state.userID);
    axios({
      url: config.api.mc_setExamination,
      method: "POST",
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
      .then((response) => {
        let data_ = response.data;
        if (data_.msg === "success") {
          //成功
        }
      })
      .catch((e) => {
        Toast.show("发布失败，请检查网络...");
        Portal.remove(key);
      });
}

Answer 2

传入一个 FormData（multipart/form-data），却序列化成了 JSON（application/json），最后又强行指定数据类型是键值对（application/x-www-form-urlencoded）？？？

这是什么奇葩的写法？？？

为啥不直接用 FormData 往上传？？？

Answer 3

axios的表单上传好像是这种写法吧

Answer 4

我在实践中是这样使用的,可以同时传图片和自定义参数

      let param = new FormData(); // 创建form对象
      const blobData = utils.dataURLtoBlob(this.src);

      param.append('file', blobData, "123.jpg"); // 通过append向form对象添加数据
      param.append('a', 'a'); // 添加form表单中其他数据
      param.append('b', 'b'); // 添加form表单中其他数据
      
      const res = await service.post('/a/b',  
        params, 
        { 
            headers: {
                'Content-Type': 'multipart/form-data',
            }, baseURL: API_HOST,
            withCredentials: true, 
            cancelToken: token 
        });