ElementUI文件上传

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

组件：

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

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

  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       },