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

穷凶极恶丶带恶人
  • 441
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) 表单的值。USVStringBlob (包括子类型,如 File)。所以上述的date需要被JSON.stringify,才能存入FormData字符串。我这里想在请求前进行appVersion值的反序列化,但是尝试使用transformRequest和拦截器都失败了。

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

回复
阅读 4.6k
4 个回答
用这个就行了,多文件和参数直接一起传了,哪有那么费事。
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);
      });
}

image.png

传入一个 FormDatamultipart/form-data),却序列化成了 JSONapplication/json),最后又强行指定数据类型是键值对application/x-www-form-urlencoded)???

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

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

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

Rybin
  • 3
新手上路,请多包涵

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

      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 
        });
宣传栏