大文件分片上传（批量并发，自动上传）vue组件封装-按钮组件_vue 大文件分片并发请求

一般上传文件时会因为ngnix对上传文件大小进行了限制、文件过大接口请求超时导致上传失败，此时可以考虑分片上传，分片就是说将文件拆分来进行上传，将各个文件的切片传递给后台，然后后台再进行合并（合并操作可由前端触发，也可由后端触发，本文由后端触发，前端触发可参考分片上传前端触发合并示例），切片就是文件切分字节（类似于字符串的截取）。

上传文件时需要一个文件的唯一标识，在上传文件过程中需要将文件的唯一标识（文件的唯一标识__该文件的MD5加密文件的字符串）传递给后端，后端会通过该标识返回给我们该上传文件目前的上传状态：
1、文件已存在，文件已经上传，此时我们无需再进行任何操作。
2、部分上传或者尚未上传，把需要上传的分片进行上传

实现目标：

• 简单封装分片上传组件
• 可在其他vue的页面应用使用
• 自动触发上传

实现方式

• 新建vue文件，单独封装该上传组件
• 在vue页面触发使用

1、安装spark-md5

文件的MD5唯一标识，可通过spark-md5来获取，具体步骤：

npm i spark-md5 --save
1

2、单独封装切片所需js文件(本文起名为chunkFile.js)，获取文件的唯一MD5标识码、切片大小等

import SparkMD5 from 'spark-md5'

/**
 * 获取文件MD5唯一标识码
 * @param file
 * @returns {Promise<unknown>}
 */
export function getFileMd5(file, chunkCount) {
  return new Promise((resolve, reject) => {
    const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
    const chunks = chunkCount
    let currentChunk = 0
    const spark = new SparkMD5.ArrayBuffer()
    const fileReader = new FileReader()

    fileReader.onload = function(e) {
      spark.append(e.target.result)
      currentChunk++
      if (currentChunk < chunks) {
        loadNext()
      } else {
        const md5 = spark.end()
        resolve(md5)
      }
    }
    fileReader.onerror = function(e) {
      reject(e)
    }
    function loadNext() {
      const start = currentChunk * chunkSize
      let end = start + chunkSize
      if (end > file.size) {
        end = file.size
      }
      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
    }
    loadNext()
  })
}
// 切片大小，自定义
export const chunkSize = 5 * 1024 * 1024
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

3、封装分片上传组件（本文起名ChunksUpload.vue）

<template>
  <div class="uoploadBtn">
    <el-button type="primary" :size="size" plain @click.native="clickBtn">{{ title }}</el-button>
    <input v-if="fileUpload" ref="fileUpload" type="file" style="width: 0px;height: 0px" @change="fileChange">
  </div>
</template>

<script>
import { chunkSize, getFileMd5 } from './chunkFile.js'
import request from './request';

export default {
  name: 'ChunksUpload',
  props: {
    actionUrl: { //文件上传服务地址
      type: String,
      default: ''
    },
    chunksUrl: { //检测文件上传服务地址
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'mini'
    },
    title: {
      type: String,
      default: '上传文件'
    },
    params: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },

  data() {
    return {
      fileUpload: false
    };
  },
  watch: {},
  methods: {
    clickBtn() {
      const that = this;
      this.fileUpload = true;
      this.$nextTick(() => {
        that.$refs.fileUpload.click();
      });
    },
    /**
     * @description:新增
     * @param {*} loading
     * @return {*}
     */
    insertReq(loading, params, formDataFile) {
      return request({
        url: this.actionUrl,
        method: 'post',
        params: params,
        data: formDataFile,
        timeout: 600000
      });
    },
    /**
     * @description: 上传文件发生变化时触发
     * @param {*}
     * @return {*}
     */
    fileChange() {
      const file = this.$refs.fileUpload.files[0];
      if (!(file?.name.endsWith('.zip'))) {
        this.$message.error('请选择扩展名为.zip的文件包');
        return;
      }
      this.CheckChunckInfo(file, this.insertReq);
    },
    async CheckChunckInfo(file, ReqMethod) {
      const checkloading = this.$loading({
        lock: true,
        text: '上传文件检测中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const fileSize = file.size;
      const chunkCount = Math.ceil(fileSize / chunkSize);
      console.log('文件大小：', (File.size / 1024 / 1024) + 'Mb', '分片数：', chunkCount);
      const fileMd5 = await getFileMd5(file, chunkCount);
      const params = {
        'identifier': fileMd5, // 文件的md5
        'filename': file.name// 文件名
      };
      try {
        const response = await request({ url: this.chunksUrl, method: 'get', params });
        checkloading.close();
        this.fileUpload = false;
        if (response.code !== 0) {
          this.$message.warning(response?.msg);
          return;
        }
        const res = response.data;
        if (!res.exist) {
        // 没有完全上传就继续走分片上传
          const loading = this.$loading({
            lock: true,
            text: '正在上传,请等待...',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.beforeUpload(ReqMethod, loading, res, chunkCount, fileMd5, file);
        } else {
          this.$message.warning(file.name + ' 该压缩文件已上传，请重新选择！');
          return;
        }
      } catch (e) {
        this.fileUpload = false;
        checkloading.close();
      }
    },
    async beforeUpload(ReqMethod, loading, res, chunkCount, fileMd5, file) {
      const self = this;
      // 获取后端返回的已上传分片数字的数组
      const uploaded = res.chunks;
      const totalChunk = Array.from(Array(chunkCount).keys(), n => n + 1);
      const notUpload = totalChunk.filter(v => !uploaded.includes(v));
      const cycleCompute = [];
      // 此处将未上传的切片按照每5个为一组进行分组，为后面每次批量上传的5个切片做准备，该数量可根据自己情况修改
      if (notUpload.length) {
        notUpload.reduce(function(pre, item, index, notUpload) {
          var begin = index * 5;
          var end = begin + 5;
          var res = notUpload.slice(begin, end);
          if (res.length != 0) {
            cycleCompute[index] = res;
          }
        }, []);
      } else {
        loading.close();
        this.$message.error(file.name + '该压缩文件已上传，请重新选择！');
        return;
      }
      // 循环调用上传
      if (cycleCompute.length) {
        for (let c = 0; c < cycleCompute.length; c++) {
          const reqArr = [];
          const cycleItem = cycleCompute[c];
          for (let n = 0; n < cycleItem.length; n++) {
            // 定义分片开始上传的序号
            const i = cycleItem[n] - 1;
            const start = i * chunkSize;
            const end = Math.min(file.size, start + chunkSize);
            const _chunkFile = file.slice(start, end);
            const formDataFile = new FormData();
            const params = {
              identifier: fileMd5,
              total_chunks: chunkCount,
              chunk_numer: cycleItem[n],
              filename: file.name,
              ...self.params //自定义上传的参数
            };
            formDataFile.append('file', _chunkFile);
            reqArr.push(ReqMethod(loading, params, formDataFile));
          }
          try {
            const responselist = await Promise.all(reqArr);
            const errprRes = responselist.filter(item => { return !item || item.code != 0; });
            if (errprRes.length) {
              loading.close();
              errprRes.forEach(resItem => {
                this.$message.error(resItem.msg);
              });
              this.$emit('afterSave', false);
              return;
            }
          } catch (e) {
            loading.close();
            return;
          }
        }
      }
      loading.close();
      this.$message.success('上传成功');
      this.$emit('afterSave', true);
    }
  }
};
</script>

<style scoped>
  .uoploadBtn{
    display: inline-block;
    margin: 0px 12px
  }
</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