标签：文件 console fileList element blog 上传 response
-
背景
测试发现，无论上传成功上传失败显示的都会生成列表，并且失败了的也出现在了列表中，也没有任何的提示；看官方文档发现on-success钩子的函数中function(response, file, fileList)第一个参数是response，也就是后台给我们返回的结果。修改on-success钩子
/*
* 根据数组对象属性删除对应项
* @param {Array} arr - 单个文件上传大服务器返回的结果对象
* @param {String} attr - 单个文件对象
* @param {Array} fileList -文件上传的列表（所有选择的文件)
* @return void
*/
uploadFileSuccess(response, file, fileList){
// console.log(response)
if(response.meta.status==200){
// console.log("文件上传成功",response)
this.$message.success(response.data.ProductFile.UploadOldName+"：文件上传成功");
console.log(fileList)
// console.log(file)
}else{
this.$message.error(response.data.ProductFile.UploadOldName+"：上传失败，请重新上传");
//删除上传列表中，失败的文件
let index = 0;
for(const i in fileList){
if(fileList[i]==file){
index=i;
break;
}
}
//移出当前文件对象
fileList.splice(index,1);
// this.$refs.uploadFile.clearFiles();
}
},
附上组件
<el-upload
class="upload-demo"
ref="uploadFile"
:data="ProductFileUploadData"
action="http://localhost:8082/api/Product/FileUpload"
:on-preview="FilehandlePreview"
:on-remove="FilehandleRemove"
:before-remove="FilebeforeRemove"
multiple
:on-error="uploadFileError"
:on-success="uploadFileSuccess"
accept=".png,.jpg,.gif,jpeg,.bmp"
:on-exceed="FilehandleExceed"
:file-list="fileUploadList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
文件上传参考文章地址
https://blog.csdn.net/DcTbnk/article/details/109455943
删除对象参考文章地址
https://blog.csdn.net/weixin_44198965/article/details/111476673?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.no_search_link&spm=1001.2101.3001.4242.1
https://blog.csdn.net/weixin_45393094/article/details/109682648
标签：文件,console,fileList,element,blog,上传,response 来源： https://www.cnblogs.com/chengqiang521/p/15714954.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。