使用elementUI的時候，使用Upload 上傳的時候，使用 list-type 屬性來設置文件列表的樣式，before-upload方法失效

最近在做項目的時候，使用elementUI的時候，使用Upload 上傳的時候，before-upload方法失效。

情況下：使用 list-type 屬性來設置文件列表的樣式。

最終的優化之后：（演示的是修改）

需求：

1、已經提交的附件不可刪除，新上傳的附件可以刪除

2、圖片附件不能上傳其他格式的文件，一次可以多張上傳圖片，最多上傳3張，最大不超過2M

3、文件附件不能上傳除了圖片格式以外的格式，一次可以上傳多個文件，最多上傳3個文件，最大不超過2M

4、手動上傳文件

一、使用on-change方法來模擬before-upload方法來判斷文件類型或大小

查找了資料發現還是不行，只能求助大佬們？

  <el-form-item prop="image" label="圖片附件上傳">
          <el-upload
            ref="uploadImage"
            :action="uploadAction"
            :before-upload="beforeUploadPicture"
            :before-remove="beforeRemovePicture"
            :on-change="imageChange"
            list-type="picture-card"
            name="files"
            :file-list="eventDetail.images"
            :limit="3"
            multiple
            :auto-upload="false"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemovePicture"
            :on-exceed="handleExceedPicture">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog append-to-body title="圖片詳情" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

 

最后只能使用on-change來模擬before-upload方法的判斷上傳的照片或者文件的格式。

//這個是before-upload方法，來判斷上傳文件    beforeUploadPicture(file){
      // console.log(file, fileList, '=============================')
      const isImage = file.raw.type == 'image/png' || file.raw.type == 'image/jpg' ||  file.raw.type == 'image/jpeg' || file.raw.type == 'image/bmp' || file.raw.type == 'image/gif' || file.raw.type == 'image/webp';
      const isLt2M = file.size <  1024 * 1024 * 2;
      if (!isImage) {
        this.$message.error('上傳只能是png,jpg,jpeg,bmp,gif,webp格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
      }
      return isImage && isLt2M;
    },

******然后這個方法失效，on-change方法正常。我只能使用on-change方法來******

//on-change的方法 imageChange(file, fileList) {
      const isImage = file.raw.type == 'image/png' || file.raw.type == 'image/jpg' ||  file.raw.type == 'image/jpeg' || file.raw.type == 'image/bmp' || file.raw.type == 'image/gif' || file.raw.type == 'image/webp';
      const isLt2M = file.size <  1024 * 1024 * 2;
      if (!isImage) {
        this.$message.error('上傳只能是png,jpg,jpeg,bmp,gif,webp格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
      }
      if(isImage && isLt2M){
        this.imageList = fileList;
        this.images[''] = fileList;
      }else{
        fileList.splice(-1,1);
      }
    },

以上是圖片附件的：使用on-change方法模擬before-upload方法，使用splice刪除文件，splice方法是可以改變原始數組的，這樣就模擬了上傳前判斷文件格式。

文件附件的方法跟這個類似，改一下方法名就行

 

二、已經保存的文件不可刪除，怎么判斷

思路：我本來是打算從列表中根據單子狀態來判斷，然后發現我新上傳的文件，也刪除不了，所以最后使用文件的url路徑來判斷是不是已經保存的，因為這是手動保存，文件路徑如果不是服務器地址而是本地地址，就可以判斷為這是新上傳的文件，就可以刪除。

使用before-remove方法

    beforeRemovePicture(file, fileList){
      if(file.url.indexOf('blob') === -1){
        this.$message.warning('已提交的服務單的附件不能刪除')
        return false;
      }
    },

 

三、手動上傳文件和附帶其他參數

思路：可以自己構建FormData數據，使用append方法構造一個文件對象，並且將其他參數加入到文件對象

手動上傳方法（構造FormData文件對象）

let wfForm = new FormData();
      wfForm.append('orderId', this.eventDetail.orderId)
      wfForm.append('eventCategory', this.eventDetail.eventCategory)
      wfForm.append('priority', this.eventDetail.priority==null?'':this.eventDetail.priority)
      wfForm.append('title', this.eventDetail.title)
      wfForm.append('dsc', this.eventDetail.dsc==null?'':this.eventDetail.dsc)
      wfForm.append('occurDate', this.eventDetail.occurDate==null?'':this.eventDetail.occurDate)
      let attIds = ''
      for (let i = 0, length = this.eventDetail.files.length; i < length; i++) {
        attIds += this.eventDetail.files[i].attId + ',';
      }
      for (let i = 0, length = this.eventDetail.images.length; i < length; i++) {
        attIds += this.eventDetail.images[i].attId + ',';
      }
      attIds = attIds.substring(0, attIds.length - 1);
      wfForm.append('attIds', attIds);
      Object.entries(this.images).forEach(file => {
        file[1].forEach(item => {
          wfForm.append('file', item.raw)
          wfForm.append(item.name, file[0])
        })
      })
      Object.entries(this.files).forEach(file => {
        file[1].forEach(item => {
          wfForm.append('file', item.raw)
          wfForm.append(item.name, file[0])
        })
      })

說明一下：

1、this.images指的是新上傳的圖片的數組，this.files值的是新上傳的文件的數組。

2、Object.entries方法主要是用來遍歷對象屬性。

3、wfForm.append('file', item.raw)用來構建文件對象