前端Vue axios FormData上传图片相关问题

1.Vue axios 默认是 Payload格式数据请求，后端全部接口都需要 Form Data的格式数据请求
2.在封装的全局请求文件中写入：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
    let src = ''
    for (let item in data) {
      src += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
    }
    return src
}]

3.问题来了：使用FormData作为参数传与后台时，上面那段代码会一并处理，此时FormData参数为：

Snipaste_2021-05-17_17-17-00.png

研究了大半天才发现有效的方法：
在需要处理的页面写上：

    import axios from "axios";
    import Qs from "qs";

const newRequest = axios.create({
        baseUrl: "http://xxxxxxxx/api/v1/", //请求地址
        transformRequest: [
          (data) => {
            return data instanceof FormData
              ? data
              : Qs.stringify({
                  //此处的data类型判断为重要点，
                  ...data,
                });
          },
        ],
      });

      newRequest({
        method: "POST",
        url: "common/upload",
        data: formData,
      }).then((res) => {});

思路就是为了不受封装的axios文件影响，创建一个新的axios对象
正常的参数格式：

Snipaste_2021-05-17_17-24-49.png