vue上传图片组件FormData发送file对象问题

图片上传的一般流程：

1.通过上传组件拿到file对象或者fileList数组

2.创建FormData对象，将file对象或者fileList数组存入formData对象中

3.调用后台接口传入formData对象

实际遇到的问题：

发送给后台接口的应该是存有file的formData，但实际上发送的是file对象

原因：

文件上传的post请求的Content-Type类型一般为multipart/form-data，但这里报错的的post请求的Content-Type类型却为application/json;charset=UTF-8。

请求失败的Content-Type类型:

请求成功的Content-Type类型：

解决方法：

1.重新定义一个axios发送请求

import axios from "axios";
import {message} from "ant-design-vue";
import {network} from "@/utils/config";
const URL = { upload:"接口路径"};
const axiosInstance = axios.create({
    method:"post",
})
​
const upload = (data)=>{
    return axiosInstance({
        url:network.imagefix + URL.upload,
        data,
    }).then((res)=>{
        return res;
    })
        .catch((err)=>{
        message.error(err.errorMessage);
    })
}
export  default  {
    upload
}
​

2.使用request方法来发送请求,自己定义请求头的Content-Type类型

   upload(data){
        return Http.request({
           method:"post",
           url: "/file/UploadFiles",
           data,
            headers:{  'Content-Type': 'beauty part from data'}
        })
    }