element el-upload 一次上传单张/多张图片（多选）

---

前言

这是使用element-ui中的el-upload进行上传的，但是吧，预览是自定义的组件，所以多选会有些麻烦，因为file-list的参数，具体参考例子来讲吧

---

一、单张图片的上传

// 这是自定义的图片预览的组件，pictureList就是上传的图片
    <image-list :pictureList.sync="pictureList"
                     @preview="onPreview"></image-list>
    // 这是上传的标识，当图片大于9张就不允许其上传了，就没有上传的按钮啦。下面的代码也会调用on-exceed，有提示
    <el-upload v-if="pictureList.length < 9"
               ref="upload"
               class="image-upload"
               :limit="limit"
               :accept="accept"
               :multiple="multiple"
               :action="uploadUrl"
               :headers="headers"
               :data="data"
               :show-file-list="showFileList"
               :file-list="pictureList"
               list-type="picture-card"
               :before-upload="handleBeforeUpload"
               :on-exceed="handleExceed"
               :on-success="handleSuccess">
      <i class="el-icon-plus"
         v-loading.fullscreen.lock="uploading"
         element-loading-text="正在上传，请稍等..."></i>
      <!--<span slot="tip" class="el-upload-tip">只能上传 jpg/png 文件，且不超过 {{ maxSize }} MB</span>-->
    </el-upload>


// 图片上传之前
    handleBeforeUpload(file) {
      let self = this;
      // 文件类型
      const typeIsOk = file.type == 'image/jpeg' || file.type == 'image/png';
      // 文件大小
      const sizeIsOk = file.size / 1024 / 1024 < self.maxSize;
      if (typeIsOk && sizeIsOk) {
        self.uploading = true;
      }
      if (!typeIsOk) {
        self.$message.error('只能上传 jpg/png 文件！');
      }
      if (!sizeIsOk) {
        self.$message.error('单个图片大小不能超过 ' + self.maxSize + 'MB！');
      }
      return typeIsOk && sizeIsOk;
    },
    // 文件超出个数限制时
    handleExceed() {
      let self = this;
        self.$message.error('最多只能上传' + self.limit + '张图片！');
    },
    // 图片上传成功
    handleSuccess(response) {
      let self = this;
      self.uploading = false;
      if (response.success) {
        if (Object.keys(response.result).length > 0) {
          let picture = response.result;
          if (JSON.stringify(self.pictureList).indexOf(JSON.stringify(picture)) == -1) {
            self.pictureList.push(picture);
          }
          self.$message.success('图片上传成功！');
          // 图片列表
          self.$emit('update:pictureList', self.pictureList);
          // 图片上传成功
          self.$emit('uploadSuccess', self.pictureList);
        }
      } else {
        self.$message({
          showClose: true,
          duration: 10000,
          message: response.data + '！',
          type: 'error'
        });
        // 清空文件列表
        self.$refs['upload'].clearFiles();
        // 更新上传的文件
        self.$emit('update:pictureList', []);
      }
    },
    // 预览图片
    onPreview(pictureList) {
      let self = this;
      self.$emit('previewImage', pictureList);
    }

二、一次上传多张图片

html的代码都是类似的，唯一的区别是file-list，其参数名不能跟图片列表的参数名一致，不然图片列表不能进行push，从而不能预览。
因为项目需要，有新增和编辑，所以需要一个editUpload进行图片的深拷贝，作为编辑的时候已上传的数据，以此来控制总数据量便于数量限制

代码如下：

// uploadArr每次打开新增/编辑都要传空过来，就相当于清空fileList
:file-list='uploadArr'

// 需要写在handleBeforeUpload里面
// 获取第一次进来的数据，用于统计已上传的数据，即编辑
      if (this.editFirstFlag1) {
      // editUpload  仅用以计算用户可上传的图片数量；需要传给图片列表（删除再图片列表组件中进行）并实时更新
        this.editUpload =  this.pictureList.map(i => JSON.parse(JSON.stringify(i)))
        
        this.editFirstFlag1 = false
      }
// 文件超出个数限制时
    handleExceed() {
      let self = this;
      if(this.editLength == 0){
        self.$message.error('最多只能上传' + self.limit + '张图片！');
      }else {
        self.$message.error('已有'+this.editLength+'张图片，此次最多只能上传' + self.limit + '张图片！');
      }
    },

    mounted() {
    // 每次调用组件都要执行，使用v-if强制组件更新；所以editFirstFlag必须是父组件传递过来的true
    this.editFirstFlag1 = this.editFirstFlag
  },

  computed: {
    editLength(){
      // 编辑的时候已上传的数据
      return this.editUpload.length
    },
  },

  watch: {
    editLength:{
      immediate:true,
      handler(newVal, oldVal) {
        let self = this
        // 限制图片上传数量的
        this.limit = 9 - newVal
  
        // console.log(this.limit)
      }
    }
  },