本文小编为大家详细介绍“el-upload批量上传只执行一次成功回调on-success怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“el-upload批量上传只执行一次成功回调on-success怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
删除掉:
file-list="fileList"
在网上找了下解决方法,发现取消file-list绑定即可,网上也有自定义的上传事件的方法,不过这个操作起来更方便一些。
上面方法还是有点问题,正确的方法是在后台拉数据的时候,创建一个临时变量filelist2,然后将后台的数据filelist赋值给filelist2,再将filelist2绑定(:file-list="filelist2")
然后对数据的操作都在filelist中。
template部分:
<el-upload
class="el_upload_above"
action=""
ref="upload"
:limit="limitnum"
list-type="picture-card"
:http-request="uploadSectionFile"
:auto-upload="true"
:file-list="fileList"
:on-error="uploadFileError"
:on-success="uploadFileSuccess"
:on-exceed="exceedFile"
:on-remove="removeFile">
</el-upload>
script部分:
<script>
export default {
data() {
return {
fileList:[],//上传的文件列表
limitnum:2,//最大允许上传个数
};
},
methods: {
//自定义上传
uploadSectionFile(param){
var fileObj = param.file;
var form = new FormData();
// 文件对象
form.append("file", fileObj);
this.$axios.post('/file/upload',form).then(res => {
param.onSuccess(res)
}).catch(({err}) => {
param.onError(err)
})
},
//上传失败
uploadFileError(err, file, fileList){
this.$message.error("上传失败!")
},
//上传成功
uploadFileSuccess(response, file, fileList){
if(response.data.error==0){
file.response=response.data.data;
this.fileList.push(file)
}else{
this.$message.error(response.data.message);//文件上传错误提示
}
},
// 文件超出个数限制时的钩子
exceedFile(files, fileList){
this.$message.error('只能上传'+this.limitnum+'个文件');
},
//删除文件
removeFile(file,fileList) {
this.fileList=fileList;
},
}
}
</script>
注释
自定义上传后,成功和失败需要在自定义上传代码中触发(onSuccess / onError)。在组件部分需要写文件上传或失败的回调事件(uploadFileSuccess / uploadFileError)
读到这里,这篇“el-upload批量上传只执行一次成功回调on-success怎么解决”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/qq_41780372/article/details/117773863