这篇文章主要向大家介绍笔记:el-upload中,before-upload中的方法返回false时,会触发on-remove绑定的事件,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
场景
表单编辑时,要求删除上传的图片后重置某些状态,天然在on-remove中的事件写。然而,当修改上传的图片,且图片不合规时,before-uoload中天然的返回了false,还触发了on-remove事件,可是界面上的图片是在的,不须要你重置状态!!!spa
个人办法
通过对on-remove对应参数的打印,发现回调中的file参数有个status,若是是在before-upload中就被过滤了,就是ready,若是已经上传成功了去点击删除,status是success,就他了。
onRemove(file,fileList){ if(file.status == 'success'){ //删除后改变某些状态的代码 } if(file.status == 'ready'){ //这里应该就是before-upload中返回false时的状况了,还有没有别的状况,未知 } }
图片上传示例:elementUI组件
imageUpload.vue 组件
<template> <div v-loading="isLoading"> <el-upload ref="upload" action="/jpark-center-mgr/api/jsis/upload/upload2oss" multiple :limit="3" :headers="headers" list-type="picture-card" :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :on-exceed="handleExceed" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeAvatarUpload" :file-list="fileList" > <i slot="default" class="el-icon-plus"></i> <div class="el-upload__tip" slot="tip">只能上传{{supportFileExt}}文件,最多上传3张图片,且每张图片不超过5MB</div> </el-upload> <el-dialog :visible.sync="dialogVisible1" append-to-body> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> <script> import jportalCommon from '@/jportal-common-update' let userStorageService = jportalCommon.userStorageService export default { props: { // limit: { // type: Number, // default: 10, // required: false // }, // requestUrl: { // type: String, // default: "/jpark-center-mgr/api/jsis/upload/upload2oss", // required: false // }, // supportFileExt: { // type: String, // default: "jpg/jpeg/png/doc/docx/xls/xlsx/rar/zip", // required: false // }, // limitFileSize: { // type: Number, // default: 10, // required: false // }, fileList: { type: Array, default: function () { return [] }, required: true } }, data() { return { isLoading: false, //上传文件 headers: { 'orgCode': userStorageService.getUser().orgCode, 'personId': userStorageService.getUser().personId, 'personName': encodeURIComponent(userStorageService.getUser().personName), 'jsToken': userStorageService.getToken().jsToken, 'jsCurAccNo': userStorageService.getToken().jsCurAccNo }, // 上传图片 dialogImageUrl: '', dialogVisible1: false, supportFileExt: "jpg/jpeg/png", limitFileSize: 5, // 5M // fileList: [ // // {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, // // {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'} // ], } }, methods: { // 上传图片 handleRemove(file, fileList) { // console.log('删除图片', file) if (file.status == 'success') { // 防止before-upload返回false时,会删除前一个上传成功的图片 let url = file.response?file.response.respData.url:file.url this.fileList.splice(this.fileList.findIndex(item => item.url == url), 1) this.$emit("update:fileList", this.fileList); } if(file.status == 'ready'){ //这里应该就是before-upload中返回false时的状况了,还有没有别的状况,未知 } // console.log('删除完后剩下的图片', this.fileList) }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible1 = true; }, handleDownload(file) { console.log(file); }, handleExceed(files, fileList) { this.$message({ type: 'warning', message: '最多只能上传3个文件' }) }, handleSuccess(res, file, fileList) { this.isLoading = false; // var temp = {}; // temp.name = file.name; // temp.size = Math.round(file.size / 1024); this.fileList.push({url: res.respData.url}); // console.log('this.fileList',this.fileList) this.$emit("update:fileList", this.fileList); this.$message({ type: 'success', message: '文件上传成功' }); }, handleError(e, file) { this.isLoading = false; this.$message({ type: 'error', message: e }); }, //上传文件对应的函数 beforeAvatarUpload(file) { const surportExt = "."+this.supportFileExt.split("/").join("/.") const isRuleFile = file && file.name && surportExt.indexOf(file .name.substring(file.name.lastIndexOf(".")).toLowerCase()) != -1; const isLt10M = file.size / 1024 / 1024 < this.limitFileSize; if (!isRuleFile) { this.$message.error('请按指定文件格式上传!'); } if (!isLt10M) { this.$message.error('上传文件大小不能超过 '+this.limitFileSize+'MB!'); } if (isRuleFile && isLt10M) { this.isLoading = true; } return isRuleFile && isLt10M; }, clearFiles() { this.fileList = []; this.$refs.upload.clearFiles(); } }, watch: { }, mounted() { } } </script> <style scoped> .a-link { color: #030303; text-decoration: none; } .a-link:hover { color: #4E84FE; } .upload-button { width: 90px; height: 90px; background: rgba(78, 132, 254, 1); border-radius: 4px; cursor: pointer; float: left; line-height: 25px; padding-top: 20px; } .upload-tip { float: right; width: 350px; margin-left: 20px; margin-top: 50px; text-align: left; line-height: 20px; } .icon-upload { width: 14px; height: 16px; } .icon-files { width: 15px; height: 17px; cursor: pointer; } .content-font { color: #030303; font-weight: 400; } </style>
父组件中引入子组件:
<image-upload :fileList.sync="fileList"></image-upload> // .sync 是为了方便父子组件同时修改值// {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
...
data () {
return {
fileList: [ // 编辑时候默认传的数据格式
// {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
]
}
}
原文地址:https://juejin.im/post/5daff2ede51d4524c118081f
before-upload中返回false时