问题描述:在使用elementUI的el-upload上传图片的时候,上传完一张图片之后,再进行上传一次。没有反应,接口也没有调用。
问题原因:图片上传之后组件会一直保存你的文件信息。
解决: 调用的组件的this.$refs.upload.clearFiles();方法,每次上传之后清除一下的文件信息即可。
html代码:
<el-upload
class="upload-demo"
:action="URL"
ref="upload"
:headers="{ token: token }"
:on-success="handleAvatarSuccess"
:on-error="onError"
name="image"
:show-file-list="false"
:data="{ type: 1, sortedNum: 1 }"
accept=".jpeg,.png"
:limit="1"
>
<el-button type="primary" size="mini">上传图片</el-button>
</el-upload>
JS代码
handleAvatarSuccess() {
this.$message({
message: "上传成功",
type: "success",
});
this.$refs.upload.clearFiles();
this.fetchData();
},