這篇文章主要向大家介紹筆記：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 是為了方便父子組件同時修改值
...
data () {
return {
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'}
]
}
}
原文地址：https://juejin.im/post/5daff2ede51d4524c118081f
before-upload中返回false時