webuploader前端分片上传

前端分片上传附件

1. 分片上传定义:

所谓的分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为 Part）来进行分别上传，上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。分片上传不仅可以避免因网络环境不好导致的一直需要从文件起始位置还是上传的问题，还能使用多线程对不同分块数据进行并发发送，提高发送效率，降低发送时间。

2. 主要适用于以下几种场景：

• 网络环境不好：当出现上传失败的时候，可以对失败的 Part 进行独立的重试，而不需要重新上传其他的 Part。
• 断点续传：中途暂停之后，可以从上次上传完成的 Part 的位置继续上传。
• 加速上传：要上传到服务器的本地文件很大的时候，可以并行上传多个 Part 以加快上传。
• 流式上传：可以在需要上传的文件大小还不确定的情况下开始上传。这种场景在视频监控等行业应用中比较常见。
• 文件较大：一般文件比较大时，默认情况下一般都会采用分片上传。

3. 分片上传的流程大致如下:

• 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；
• 初始化一个分片上传任务，返回本次分片上传唯一标识；
• 按照一定的策略（串行或并行）发送各个分片数据块；
• 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件

1. 分片上传规则如下:

• 定义分片规则大小: chunkSize: 5 * 1024 * 1024 // 分多大一片 5M;
• 上传并发数: threads: 3 // 上传并发数, 允许同时最大上传进程数;
• 定义分片上传对象: 定义分片上传对象基础属性包含附件文件名、原始文件大小、原始文件 MD5 值、分片总数、每个分片大小、当前分片大小、当前分片序号等. 定义基础属于便于后续对文件合理分割、分片的合并等业务拓展，当然根据业务场景可以定义拓展属性;

5.前端分片上传使用方法:

下载 import Webuploader from 'webuploader';
fileSliceUpload.vue文件:

使用

 
    setLoadingStatus(val) {
      this.isLoading = val
    },
    uploadSuccess(val, data) {
      if (data && data.data && data.data.fileId) {
        this.sliceFileId = data.data.fileId || ''
      }
      this.uploadStatus = '上传成功'
      this.isLoading = false
      //上传成功
    },
    uploadProgress(filename, percent) {
      // this.isLoading = false
      this.uploadData = { filename, percent } //进度条
    },
    uploadError(file) {
      this.uploadStatus = '上传失败'
      this.isLoading = false //上传失败
    },

6. 总结:

所谓的分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为 Part）来进行分别上传。