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

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

二、整体流程解决跨域上传文件跨域上传FormData格式等问题
vue中Dom结构
上传图片更改传递到接口事件
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都支持

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！