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("")
      },