vue上传文件formData上传解决流程

一 : axios实例的配置关键配置
FormData 上传文件类型有变项目中封装的公共方法需要更改头部请求信息设置为设为 “multipart/form-data”，

二、整体流程解决跨域上传文件跨域上传FormData格式等问题
vue中Dom结构<input type=“file” @change=“handleUpload” />
上传图片更改传递到接口事件
const handleUpload = (e) => {
const service = axios.create({
baseURL: ‘/api’,
withCredentials: true // cors跨域要让后台设置cors跨域需后台设配合
})
const params = new FormData() // 声明formData数据类型
params.append(‘file’, event.target.files[0])
params.append(‘tp’, ‘partImg’)
service
.post(‘UploadFiles/UploadImg’, params, {
headers: {
‘Content-Type’: ‘multipart/form-data’// 修改请求头
}
})
.then(res => {
// console.log(‘提交成功’);
})
}
handleUpload需要在vue3项目中return

baseURL设置为api vue项目中创建vue.config文件并写入proxy跨域代理vue2和vue3都支持