ElementUI文件上傳

之前用ElementUI的Upload的時候追求方便快速，實例化一次又一次，方法一次又一次的調用，代碼大幾百行還難道維護，今天找了一些資料然后封裝了一下，估計還有坑，先做個筆記！！！

組件：

<template>
  <el-upload
    class="upload-demo"
    :action="action"
    :accept="accept"
    :limit="limit"
    :multiple="multiple"
    :before-upload="beforeAvatarUpload"
    :on-exceed="handleExceed"
    :before-remove="beforeRemove"
    :on-remove="handleRemove"
    :on-success="successFile"
    :file-list="fileList">
    <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline"></el-button>
  </el-upload>
</template>
<script>
  export default {
    name: 'myupload',
    props: {
      action: null,
      accept: {
        type: String,
        default: null
      },
      limit: null,
      multiple: null,
      uploadId: null, //接收到的自定義的參數
      fileSize: null,
      onBeforeAvatarUpload: Function,
      onHandleExceed: Function,
      onBeforeRemove: Function,
      onSuccess: Function,
      onRemove: Function,
      fileList: null,
    },
    methods: {
      beforeAvatarUpload() {
        this.onBeforeAvatarUpload(...arguments, this.uploadId);
      },
      handleExceed() {
        this.onHandleExceed(...arguments, this.uploadId);
      },
      beforeRemove() {
        this.onBeforeRemove(...arguments, this.uploadId);
      },
      handleRemove() {
        this.onRemove(...arguments, this.uploadId);
      },
      successFile() {
        this.onSuccess(...arguments, this.uploadId);
      }
    }
  }
</script>

頁面html部分：

 <el-row v-for="(uploadList,index) in uploadOption" :key="index">
          <el-col :lg="24">
            <el-form-item :label="uploadList.labelName">
              <div class="" style="border: 1px solid #e6e6e6;background: #FFFFFF;margin-right: 22px">
                <zgw-upload
                  :action="uploadList.action"
                  :accept="uploadList.accept"
                  :limit="uploadList.limit"
                  :fileSize="uploadList.fileSize"
                  :multiple="uploadList.multiple"
                  :uploadId="index"
                  :onBeforeAvatarUpload="beforeAvatarUpload"
                  :onHandleExceed="handleExceed"
                  :onBeforeRemove="beforeRemove"
                  :onSuccess="successFile"
                  :onRemove="handleRemove"
                  :fileList="fileList">
                </zgw-upload>
                <div slot="tip" class="el-upload__tip"
                     style="margin-left: 20px;margin-bottom: 10px;color: #BCC3D3;display: block;">
                  {{uploadList.tip}}
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

頁面js部分：

　　　　uploadOption: [
          {
            labelName: "身份證證明：",
            action: "URL路徑*********************",
            accept: "image/jpg, image/jpeg, image/png",
            limit: 2,
            fileSize: 2,
            multiple: true,
            tip: "請上傳身份證的正反面照片，支持JPG, PNG , JPEG , 最多支持2張,每張不超過2MB"
          } 78         ],

　　　　/*上傳前*/
      beforeAvatarUpload(file, limit) {
        console.log("上傳文件之前的鈎子====接受一個參數")
        console.log(file)
        console.log(limit)
        console.log("上傳文件之前的鈎子end====")
        console.log("")
        console.log("")
      },
      /*刪除前詢問*/
      beforeRemove(file, fileList) {
        return this.$confirm(`確定移除 ${ file.name }？`);
      },
      /*刪除*/
      handleRemove(file, fileList, limit) {
        console.log("文件列表移除文件時的鈎子====接受兩個參數file, fileList")
        console.log(file)
        console.log(fileList)
        console.log(limit)
        console.log("文件列表移除文件時的鈎子end====")
        console.log("")
        console.log("")
      },
      /*文件超出限制*/
      handleExceed(file, fileList, limit) {
        console.log("文件超出個數限制時的鈎子====接受兩個參數file, fileList")
        console.log(file)
        console.log(fileList)
        console.log(limit)
        console.log("文件超出個數限制時的鈎子end====")
        console.log("")
        console.log("")
      },
      /*上傳成功*/
      successFile(response, file, fileList, limit) {
        console.log("文件上傳成功時的鈎子====接受三個參數response，file, fileList")
        console.log(response)
        console.log(file)
        console.log(fileList)
        console.log(limit)
        console.log("文件上傳成功時的鈎子end====")
        console.log("")
        console.log("")
      },