解决el-upload批量上传只执行一次成功回调on-success的问题
作者：小宝&
这篇文章主要介绍了解决el-upload批量上传只执行一次成功回调on-success的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-upload批量上传只执行一次成功回调on-success
删除掉：
file-list="fileList"
在网上找了下解决方法，发现取消file-list绑定即可，网上也有自定义的上传事件的方法，不过这个操作起来更方便一些。
上面方法还是有点问题，正确的方法是在后台拉数据的时候，创建一个临时变量filelist2,然后将后台的数据filelist赋值给filelist2,再将filelist2绑定（:file-list="filelist2"）
然后对数据的操作都在filelist中。
el-upload自定义上传后回调上传成功和失败事件
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）
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。