MDN关于FormData的介绍

1. 由于需要自定义传参，就使用customRequest这个方法

      <a-upload
                v-model:file-list="fileList"
                list-type="picture-card"
                class="avatar-uploader"
                :maxCount="1"
                :customRequest="uploadImage"
                :before-upload="beforeUpload"
                @change="handleChange1"
              >
                <div v-if="fileList.length < 1" class="ant-upload-text">
                  <plus-outlined />
                </div>
              </a-upload>

这通过get可以访问到formData，但是上传的时候还是空的，后端规定上传图片传两个参数原来这样写：

export function uploadPicture(data) {
    return http.request({
        url: '/admin/picture/uploadPicture',
        method: 'post',
        data
    })
}

 const uploadImage = async (data) => {
      let formData = new FormData();
      formData.append("file", data.file);
      // 自定义参数
      let params = {
        directoryName: "service",
        file: formData,
      };
      let res = await uploadPicture(params);
      if (res.success) {
        console.log(res.object, "图片地址是-----");
      }
    };

然后开始打印formData，这个是空的，虽然formData.get('file')有值，但是上传的时候就是空的，一番百度还是不行……

2.

最后请求体中只传了一个formData，有参数了就 。用对象包裹着，传的formData就是空……

let res = await uploadPicture(formData);

然后再和后端协调下这个接口请求体内只传formData，就可以上传成功了。

---

如果不是封装好的`api`也可以这样写

import axios from "axios";

const uploadImage = async (data) => {
      let formData = new FormData();
      formData.append("file", data.file);
        axios({
        url: "你的URL前缀/admin/picture/uploadPicture",
        method: "post",
        data: formData,
        //配置请求头
        // headers: {
        //   token: getToken(),
        // },
      }).then(res=>{
        console.log(res)
      });
    };

---

其它:
刚开始以为formData的问题就看了如何访问这个值

通过get才可以访问到