elupload图片上传，beforeupload中的方法返回false时，会触发onremove绑定的事件 front

这篇文章主要向大家介绍笔记：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 {
     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;
     350px;
    margin-left: 20px;
    margin-top: 50px;
    text-align: left;
    line-height: 20px;
  }

  .icon-upload {
     14px;
    height: 16px;
  }

  .icon-files {
     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时