【记录：简易实现vue-simple-uploader封装大文件分片上传、断点续传上传插件】_vue-simple-uploader@1.0.1

之前一直使用的element的上传组件，后面发现大于5G的文件上传不了，然后通过各种查询浏览，才发现有插件可以帮助实现。因为没写过所以实现过程还是挺复杂的，需要前后端配合，具体也是参考夏大师博客完成，公司需求不复杂，功能实现就行，所以写的很简易。
插件：vue-simple-uploader

1.组件代码如下：

<template>
  <div id="global-uploader">
    <!-- 上传 -->
    <uploader
      ref="uploader"
      :options="options"
      :auto-start="false"
      class="uploader-example"
      :file-status-text="statusText"
      @file-added="onFileAdded"
      @file-success="onFileSuccess"
      @file-progress="onFileProgress"
      @file-error="onFileError"
    >
      <uploader-unsupport />
      <uploader-drop
        style="display:flex;padding:10px;align-items: center;justify-content: center;"
      >
        <p>拖动文件到此 或</p>
        <uploader-btn id="global-uploader-btn" ref="uploadBtn" :attrs="attrs">
          <i class="el-icon-upload" />
          <span style="margin-left:5px;">选择文件</span></uploader-btn>
      </uploader-drop>

      <uploader-list v-show="panelShow">
        <div slot-scope="props" class="file-panel">
          <!-- <div class="file-title">
            <h4>文件列表</h4>
          </div> -->
          <ul class="file-list">
            <li v-for="file in props.fileList" :key="file.id">
              <uploader-file
                ref="files"
                :class="'file_' + file.id"
                :file="file"
                :list="true"
              />
            </li>
            <div v-if="!props.fileList.length" class="no-file">
              暂无待上传文件
            </div>
          </ul>
        </div>
      </uploader-list>
    </uploader>
  </div>
</template>
<script>
import seversConfig from '../../../vue.config'
const SparkMD5 = require('spark-md5')
export default {
  name: 'GlobalUploader',
  props: {
    params: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      serverAddress: seversConfig.devServer.proxy['/api'].target.split(
        '/api'
      )[0],
      uploadIng: false, // 上传状态
      panelShow: false, // 选择文件后，展示上传panel
      attrs: {
        // 接受的文件类型，形如['.png', '.jpg', '.jpeg', '.gif', '.bmp'...]
        // accept: ACCEPT_CONFIG.getAll()
        // accept: [
        //   '.png',
        //   '.jpg',
        //   '.jpeg',
        //   '.gif',
        //   '.bmp',
        //   '.tar',
        //   '.txt',
        //   '.exe',
        //   '.rar',
        //   '.7z',
        //   '.wim',
        //   '.zip',
        //   '.doc',
        //   '.xls',
        //   '.xlsx',
        //   '.pdf'
        // ]
      },
      statusText: {
        success: '上传成功',
        error: '上传失败',
        uploading: '正在上传',
        paused: '暂停上传',
        waiting: '等待上传'
      },
      options: {
        target: `/api/addfilebig`, // 目标上传 URL
        chunkSize: 10 * 1024 * 1024, // 分块大小
        fileParameterName: 'file', // 上传文件时文件的参数名，默认file
        simultaneousUploads: 1, // 并发数
        maxChunkRetries: 3, // 最大自动失败重试上传次数
        testChunks: true, // 是否开启服务器分片校验  -> 即上传前判断块是否已经存在
        // 服务器分片校验函数，秒传及断点续传基础
        /*
                    服务器分片校验函数，判断秒传及断点续传,传入的参数是Uploader.Chunk实例以及请求响应信息
                    reponse码是successStatuses码时，才会进入该方法
                    reponse码如果返回的是permanentErrors 中的状态码，不会进入该方法，直接进入onFileError函数 ，并显示上传失败
                    reponse码是其他状态码，不会进入该方法，正常走标准上传
                    checkChunkUploadedByResponse函数直接return true的话，不再调用上传接口
        */
        checkChunkUploadedByResponse: function(chunk, message) {
          //   console.log(message, 'msg')
          const objMessage = JSON.parse(message)
          if (parseInt(objMessage.code) === 2) {
            return true
          }
          return (objMessage.data || []).indexOf(chunk.offset + 1) >= 0
        },
        headers: {
          // 在header中添加的验证，请根据实际业务来
          //   Authorization: 'Bearer ' + Ticket.get().access_token
        },
        // 额外的自定义查询参数
        query: (file, chunk) => {
          //   console.log(file, 'fileQuery')
          file.params = this.params
          return {
            ...file.params
          }
        }
      }
    }
  },
  methods: {
    //   一个文件选中
    onFileAdded(file, event) {
    //   console.log(this.$refs.uploader, 'uploader')
      this.panelShow = true
      // 调用校验MD5方法
      this.computeMD5(file)
      // 将额外的参数赋值到每个文件上，解决了不同文件使用不同params的需求
      file.params = this.params
      this.uploadIng = true
      this.$emit('getLoading', this.uploadIng)
    },
    computeMD5(file) {
      const loading = this.$loading({
        lock: true,
        text: `正在计算MD5`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const fileReader = new FileReader()
      const time = new Date().getTime()
      const blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice
      let currentChunk = 0
      const chunkSize = this.options.chunkSize
      const chunks = Math.ceil(file.size / chunkSize)
      const spark = new SparkMD5.ArrayBuffer()
      // 文件状态设为"计算MD5"
      //   this.statusSet(file.id, 'md5')
      file.pause()
      loadNext()
      fileReader.onload = e => {
        spark.append(e.target.result)
        if (currentChunk < chunks) {
          currentChunk++
          loadNext()
          // 实时展示MD5的计算进度
          this.$nextTick(() => {
            console.log(
              '校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
            )
          })
        } else {
          const md5 = spark.end()
          loading.close()
          this.computeMD5Success(md5, file)
          console.log(
            `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
              file.size
            } 用时：${new Date().getTime() - time} ms`
          )
        }
      }
      fileReader.onerror = function() {
        this.error(`文件${file.name}读取出错，请检查该文件`)
        loading.close()
        file.cancel()
      }
      function loadNext() {
        const start = currentChunk * chunkSize
        const end =
          start + chunkSize >= file.size ? file.size : start + chunkSize
        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
      }
    },
    // MD5校验成功
    computeMD5Success(md5, file) {
      file.uniqueIdentifier = md5
      file.resume() // 开始上传
      //   this.statusRemove(file.id)
    },
    // 文件上传进度
    onFileProgress(rootFile, file, chunk) {
      this.uploadIng = true
      this.$emit('getLoading', this.uploadIng)
      console.log(
        `上传中 ${file.name}，chunk：${chunk.startByte /
          1024 /
          1024} ~ ${chunk.endByte / 1024 / 1024}`
      )
    },
    onFileSuccess(rootFile, file, response, chunk) {
      const res = JSON.parse(response)
      //   console.log(res, 'res')
      if (parseInt(res.code) === 1) {
        // file.cancel()
      }
      // 服务器自定义的错误，这种错误是Uploader无法拦截的
      if (parseInt(res.code) === 0) {
        return
      } else {
        file.cancel()
        this.$emit('getUrl', res.url)
      }
      this.uploadIng = false
      this.$emit('getLoading', this.uploadIng)
      // 如果服务端返回需要合并
      //   if (res.needMerge) {
      //     //   合并接口调用
      //     addfilebig({
      //       tempName: res.tempName,
      //       fileName: file.name,
      //       ...file.params
      //     })
      //       .then(data => {
      //         // 文件合并成功
      //         Bus.$emit('fileSuccess', data)
      //       })
      //       .catch(e => {})
      //     // 不需要合并
      //   } else {
      //     Bus.$emit('fileSuccess', res)
      //     console.log('上传成功')
      //   }
    },
    onFileError(rootFile, file, response, chunk) {
      console.log(response, 'fileError')
    }
  }
}
</script>
<style lang="scss" scoped>
.uploader-example {
  width: 100%;
  //   padding: 15px;
  //   margin: 40px auto 40px;
  font-size: 12px;
  //   border: 1px solid #000 !important;
}

.uploader-example .uploader-btn {
  width: 80px;
  height: 24px;
  //   line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  background-color: #1890ff;
  border: 1px solid #1890ff;
  border-color: #1890ff;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  margin-left: 10px;
  border-radius: 3px;
  transition: 0.1s;
  font-weight: 400;
  -webkit-user-select: none;
  padding: 7px 15px;
  font-size: 12px;
  :hover {
    background-color: #1890ff;
  }
}

.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  ul {
    margin: 0 !important;
    padding-left: 0 !important;
    li {
      ::marker {
        unicode-bidi: isolate;
        font-variant-numeric: tabular-nums;
        text-transform: none;
        text-indent: 0px !important;
        text-align: start !important;
        text-align-last: start !important;
      }
      list-style-type: none !important;
    }
  }
  .uploader-file {
    // border-bottom: 0;
  }
}
.uploader-unsupport {
  :hover {
    background-color: #1890ff;
  }
}
.uploader-btn {
  display: inline-block;
}
.no-file {
  padding: 20px;
  text-align: center;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336

2.引用方式（补充）

 <template>
 	 <uploadFile
            :params="bigFileParams"
            @getUrl="getUrl"
            @getLoading="getLoading"
  	/>
 </template>
  <script>
 export default {
	 data(){
		 return{
  		 	bigFileParams: {
      		 // 大文件参数
      		},
      		uploadIng: false
 			}
 		},
 		methods:{
 		// 大文件上传相关
    	getUrl(url) {
    	// 获取上传完后的url
    	  this.postObj.url = url
    	  //   console.log(url, 'url2222222222')
    	},
    	// 上传loading
 		getLoading(uploadIng) {
      	this.uploadIng = uploadIng
   		 }
	 }
 }
 	
  
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

1