Element-ui上传图片踩坑
使用Element-ui组件上传图片时,使用自带的action发起上传请求时碰到400错误
错误代码
<el-upload
class="upload-demo"
action="http://localhost:8080/create/uploadAvatar"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
list-type="picture"
:before-upload="beforeUpload" //上传之前执行
:data="dataForm" //上传时额外带的参数,注意是额外
name="avatar" //一看是不知道这个就是文件参数名称
:headers="headers"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
this.$message.warning(`,,,,,`);
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`最多选择一张图片`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
beforeUpload(file) {
//全部是多余操作,根本不用写这个函数
/*this.headers = {
"Content-Type": 'multipart/form-data'
}
this.avatarParamBody = {
avatar: file,
};
console.log(this.avatarParamBody);
console.log(this.headers);*/
}
1.上传时,服务端没有接受到对应名称的参数。
弄了很久都没有解决,我就想着怎么就接受不到avatar作为文件参数名。
后来查了很多帖子才知道,有一个name属性对应的就是参数名,直接在组件里面写个name=“avatar”就可以,完全不用自己加参数。
2.第一次上传成功,第二次报错
原来这个发起上传请求会自动给加上清求头"Content-Type": 'multipart/form-data'
我在beforeUpload中加入了请求头,第一次没问题,但第二次就写了连个Content-Type参数,导致后端报错。
这么一来before-upload的函数就是多余的!!!除非有需要