最近和同学在写一个项目时,用到了element-ui。当时是要实现一个头像上传的功能,因为以前还没用过这个组件来写,用的很生疏。当我遇到跨域问题的时候,还以为是组件用的不对,当时我是这样写的:
<el-upload
class="avatar-uploader img"
:headers="Myheader"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
action="http://XXXXXXXXXXX"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
当时的报错是authorization,我使用了代理服务器,请求头也把该加的加上了,所以应该不是寻常的跨域报错,于是我以为是组件使用不当导致的Authorization变成了authorization。因为当时其他请求都写的没有毛病,于是我在网上找了半天资料后,改成了如下:
<el-upload
class="avatar-uploader img"
:headers="Myheader"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
action=""
:http-request="upload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
下面是对应的函数
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log(res)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
},
upload(param) {
var formData = new FormData()
formData.append('file', param.file)
http.put('http://XXXXXX/user/basic/updateUserAvatar', formData).then(
response => {
alert('上传图片成功')
console.log(response)
}).catch(err => {
alert('图片上传失败')
console.log(err)
console.log(param.file)
formData.forEach((value, key) => {
console.log(`key ${key}: value ${value}`);
})
})
}
这样写的,这样一来,原先由组件封装好的函数进行上传,现在则变成了由自己写的函数进行上传。我想着这样一来这块用的就和其他请求没什么区别了,但是很遗憾,还是报错了。最后一行一行的查找了半天,发现了原因,url我使用的是"http://XXXXXX/user/basic/updateUserAvatar",因为自己有在拦截器里加前面的XXXXXX及之前的部分,所以报错了,删除之后就好了。