前端vue项目上传图片or文件到后台服务
前端文件上传的关键在于正确设置请求参数:1)将Content-Type设为"multipart/form-data";2)使用FormData对象封装文件数据。示例代码展示了一个完整的图片上传实现,包括axios配置和Vue组件中的文件处理逻辑。通过Promise封装上传方法,结合加载状态提示,实现了与后端服务的稳定交互。核心要点是正确配置请求头和数据格式,确保文件能成功传输到
·
前端上传文件多种多样,但是都大同小异,重要的也就是与后台服务打通这一步。
下面图片演示重要的两点:
第一点,要将请求的Content-Type设置为"multipart/form-data"
第二点,要将接口文件入参放入new FormData()中
好,下面附上代码供参考
export const uploadImage = (url, params = {}) => {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: url,
data: params,
headers: {
"Content-Type": "multipart/form-data"
}
}).then(response => {
resolve(response.data)
}).catch((error) => {
reject(error)
})
})
}
afterRead(file) {
// 此时可以自行将文件上传至服务器
console.log(file, this.fileList);
const formData = new FormData();
formData.append('avatar', file.file)
const toast = this.$toast.loading({
duration: 0,
overlay: true,
forbidClick: true,
message: '上传中...',
});
this.$uploadImage(`接口地址`, formData).then(res => {
if (res.code !== 200) {
toast.clear()
this.$toast(res.msg)
return
}
toast.clear()
})
},
更多推荐
所有评论(0)