ElementUI文件上传

以前用ElementUI的Upload的时候追求方便快速，实例化一次又一次，方法一次又一次的调用，代码大几百行还难道维护，今天找了一些资料而后封装了一下，估计还有坑，先作个笔记！！！html

组件：this

 1 <template>
 2   <el-upload  3     class="upload-demo"
 4  :action="action"
 5  :accept="accept"
 6  :limit="limit"
 7  :multiple="multiple"
 8  :before-upload="beforeAvatarUpload"
 9  :on-exceed="handleExceed"
10  :before-remove="beforeRemove"
11  :on-remove="handleRemove"
12  :on-success="successFile"
13  :file-list="fileList">
14     <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline"></el-button>
15   </el-upload>
16 </template>
17 <script>
18  export default { 19  name: 'myupload', 20  props: { 21  action: null, 22  accept: { 23  type: String, 24         default: null
25  }, 26  limit: null, 27  multiple: null, 28  uploadId: null, //接收到的自定义的参数
29  fileSize: null, 30  onBeforeAvatarUpload: Function, 31  onHandleExceed: Function, 32  onBeforeRemove: Function, 33  onSuccess: Function, 34  onRemove: Function, 35  fileList: null, 36  }, 37  methods: { 38  beforeAvatarUpload() { 39         this.onBeforeAvatarUpload(...arguments, this.uploadId); 40  }, 41  handleExceed() { 42         this.onHandleExceed(...arguments, this.uploadId); 43  }, 44  beforeRemove() { 45         this.onBeforeRemove(...arguments, this.uploadId); 46  }, 47  handleRemove() { 48         this.onRemove(...arguments, this.uploadId); 49  }, 50  successFile() { 51         this.onSuccess(...arguments, this.uploadId); 52  } 53  } 54  } 55 </script>

页面html部分：spa

<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部分：code

 1 　　　　uploadOption: [  2  {  3  labelName: "身份证证实：",  4  action: "URL路径*********************",  5  accept: "image/jpg, image/jpeg, image/png",  6  limit: 2,  7  fileSize: 2,  8  multiple: true,  9  tip: "请上传身份证的正反面照片，支持JPG, PNG , JPEG , 最多支持2张,每张不超过2MB"  10  } 78  ],  79 
 80 　　　　/*上传前*/  81  beforeAvatarUpload(file, limit) {  82  console.log("上传文件以前的钩子====接受一个参数")  83  console.log(file)  84  console.log(limit)  85  console.log("上传文件以前的钩子end====")  86  console.log("")  87  console.log("")  88  },  89  /*删除前询问*/  90  beforeRemove(file, fileList) {  91  return this.$confirm(`肯定移除 ${ file.name }？`);  92  },  93  /*删除*/  94  handleRemove(file, fileList, limit) {  95  console.log("文件列表移除文件时的钩子====接受两个参数file, fileList")  96  console.log(file)  97  console.log(fileList)  98  console.log(limit)  99  console.log("文件列表移除文件时的钩子end====") 100  console.log("") 101  console.log("") 102  }, 103  /*文件超出限制*/ 104  handleExceed(file, fileList, limit) { 105  console.log("文件超出个数限制时的钩子====接受两个参数file, fileList") 106  console.log(file) 107  console.log(fileList) 108  console.log(limit) 109  console.log("文件超出个数限制时的钩子end====") 110  console.log("") 111  console.log("") 112  }, 113  /*上传成功*/ 114  successFile(response, file, fileList, limit) { 115  console.log("文件上传成功时的钩子====接受三个参数response，file, fileList") 116  console.log(response) 117  console.log(file) 118  console.log(fileList) 119  console.log(limit) 120  console.log("文件上传成功时的钩子end====") 121  console.log("") 122  console.log("") 123       },