flex断点续传jspVue 年夜文件上传和断点续传

转成 ArrayBuffer 是由于后面要用 SparkMD5 这个库天生 hash 值，对文件进行命名

async handleChange(file) { const fileObj = file.raw try{ const buffer = await this.fileToBuffer(fileObj) console.log(buffer) }catch(e){ console.log(e) }}

打印 buffer 结果如下图

把稳：before-upload 函数和 on-change 函数的参数都有 file，但是 on-change 中的 file 不是 File 工具，要获取File 工具须要通过 file.raw。
这里用到 FileReader 类将 File 工具转 ArrayBuffer 工具，由于是异步过程，以是用 Promise 封装:

flex断点续传jspVue 年夜文件上传和断点续传 Bootstrap

// 将 File 工具转为 ArrayBuffer fileToBuffer(file) { return new Promise((resolve, reject) => { const fr = new FileReader() fr.onload = e => { resolve(e.target.result) } fr.readAsArrayBuffer(file) fr.onerror = () => { reject(new Error('转换文件格式发生缺点')) } })}创建切片

可以通过固定大小或是固天命量把一个文件分成好几个部分，为了避免由于 js 利用的 IEEE754 二进制浮点数算术标准可能导致的偏差，我决定用固定大小的办法对文件进行切割，设定每个切片的大小为 2M，即 2M = 21024KB = 210241024B = 2097152B。
切割文件用到的是 Blob.slice()

// 将文件按固定大小（2M）进行切片，把稳此处同时声明了多个常量const chunkSize = 2097152, chunkList = [], // 保存所有切片的数组 chunkListLength = Math.ceil(fileObj.size / chunkSize), // 打算统共多个切片 suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后缀名 // 根据文件内容天生 hash 值const spark = new SparkMD5.ArrayBuffer()spark.append(buffer)const hash = spark.end()// 天生切片，这里后端哀求通报的参数为字节数据块（chunk）和每个数据块的文件名（fileName）let curChunk = 0 // 切片时的初始位置for (let i = 0; i < chunkListLength; i++) { const item = { chunk: fileObj.slice(curChunk, curChunk + chunkSize), fileName: `${hash}_${i}.${suffix}` // 文件名规则按照 hash_1.jpg 命名 } curChunk += chunkSize chunkList.push(item)}console.log(chunkList)

选择一个文件后将打印得到诸如下图的结果

发送要求

发送要求可以是并行的或是串行的，这里选择串行发送。
每个切片都新建一个要求，为了能实现断点续传，我们将要求封装到函数 fn 里，用一个数组 requestList 来保存要求凑集，然后封装一个 send 函数，用于要求发送，这样一旦按下停息键，可以方便地终止上传，代码如下：

sendRequest() { const requestList = [] // 要求凑集 this.chunkList.forEach(item => { const fn = () => { const formData = new FormData() formData.append('chunk', item.chunk) formData.append('filename', item.fileName) return axios({ url: '/single3', method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data: formData }).then(res => { if (res.data.code === 0) { // 成功 if (this.percentCount === 0) { this.percentCount = 100 / this.chunkList.length } this.percent += this.percentCount // 改变进度 } }) } requestList.push(fn) }) let i = 0 // 记录发送的要求个数 const send = async () => { // if ('停息') return if (i >= requestList.length) { // 发送完毕 return } await requestList[i]() i++ send() } send() // 发送要求},

axios 部分也可以直接写成下面这种形式：

axios.post('/single3', formData, { headers: { 'Content-Type': 'multipart/form-data' }})所有切片发送成功后

根据后端接口须要再发送一个 get 要求并把文件的 hash 传给做事器，我们定义为一个 complete 方法来实现，这里假定发送的为视频文件

const complete = () => { axios({ url: '/merge', method: 'get', params: { hash: this.hash } }).then(res => { if (res.data.code === 0) { // 要求发送成功 this.videoUrl = res.data.path } })}

这样就能在文件发送成功后在页面浏览到发送的视频了。

断点续传

首先是停息按钮笔墨的处理，用了一个过滤器，如果 upload 值为 true 则显示“停息”，否则显示“连续”：

filters: { btnTextFilter(val) { return val ? '停息' : '连续' }}

当按下停息按钮，触发 handleClickBtn 方法

handleClickBtn() { this.upload = !this.upload // 如果不停息则连续上传 if (this.upload) this.sendRequest()}

在发送切片的 send 方法的开头添加 if (!this.upload) return，这样只要 upload 这个变量为 false 就不会连续上传了。
为了在停息完后可以连续发送，须要在每次成功发送一个切片后将这个切片从 chunkList 数组里删除 this.chunkList.splice(index, 1)

代码汇总

<template> <div id="app">  <el-upload action drag :auto-upload="false" :show-file-list="false" :on-change="handleChange"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">大小不超过 200M 的视频</div> </el-upload>  <div class="progress-box"> <span>上传进度：{{ percent.toFixed() }}%</span> <el-button type="primary" size="mini" @click="handleClickBtn">{{ upload | btnTextFilter}}</el-button> </div>  <div v-if="videoUrl"> <video :src="videoUrl" controls /> </div> </div></template><script> import SparkMD5 from "spark-md5" import axios from "axios" export default { name: 'App3', filters: { btnTextFilter(val) { return val ? '停息' : '连续' } }, data() { return { percent: 0, videoUrl: '', upload: true, percentCount: 0 } }, methods: { async handleChange(file) { if (!file) return this.percent = 0 this.videoUrl = '' // 获取文件并转成 ArrayBuffer 工具 const fileObj = file.raw let buffer try { buffer = await this.fileToBuffer(fileObj) } catch (e) { console.log(e) } // 将文件按固定大小（2M）进行切片，把稳此处同时声明了多个常量 const chunkSize = 2097152, chunkList = [], // 保存所有切片的数组 chunkListLength = Math.ceil(fileObj.size / chunkSize), // 打算统共多个切片 suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后缀名 // 根据文件内容天生 hash 值 const spark = new SparkMD5.ArrayBuffer() spark.append(buffer) const hash = spark.end() // 天生切片，这里后端哀求通报的参数为字节数据块（chunk）和每个数据块的文件名（fileName） let curChunk = 0 // 切片时的初始位置 for (let i = 0; i < chunkListLength; i++) { const item = { chunk: fileObj.slice(curChunk, curChunk + chunkSize), fileName: `${hash}_${i}.${suffix}` // 文件名规则按照 hash_1.jpg 命名 } curChunk += chunkSize chunkList.push(item) } this.chunkList = chunkList // sendRequest 要用到 this.hash = hash // sendRequest 要用到 this.sendRequest() }, // 发送要求 sendRequest() { const requestList = [] // 要求凑集 this.chunkList.forEach((item, index) => { const fn = () => { const formData = new FormData() formData.append('chunk', item.chunk) formData.append('filename', item.fileName) return axios({ url: '/single3', method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data: formData }).then(res => { if (res.data.code === 0) { // 成功 if (this.percentCount === 0) { // 避免上传成功后会删除切片改变 chunkList 的长度影响到 percentCount 的值 this.percentCount = 100 / this.chunkList.length } this.percent += this.percentCount // 改变进度 this.chunkList.splice(index, 1) // 一旦上传成功就删除这一个 chunk，方便断点续传 } }) } requestList.push(fn) }) let i = 0 // 记录发送的要求个数 // 文件切片全部发送完毕后，须要要求 '/merge' 接口，把文件的 hash 通报给做事器 const complete = () => { axios({ url: '/merge', method: 'get', params: { hash: this.hash } }).then(res => { if (res.data.code === 0) { // 要求发送成功 this.videoUrl = res.data.path } }) } const send = async () => { if (!this.upload) return if (i >= requestList.length) { // 发送完毕 complete() return } await requestList[i]() i++ send() } send() // 发送要求 }, // 按下停息按钮 handleClickBtn() { this.upload = !this.upload // 如果不停息则连续上传 if (this.upload) this.sendRequest() }, // 将 File 工具转为 ArrayBuffer fileToBuffer(file) { return new Promise((resolve, reject) => { const fr = new FileReader() fr.onload = e => { resolve(e.target.result) } fr.readAsArrayBuffer(file) fr.onerror = () => { reject(new Error('转换文件格式发生缺点')) } }) } } }</script><style scoped> .progress-box { box-sizing: border-box; width: 360px; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 10px; background-color: #ecf5ff; font-size: 14px; border-radius: 4px; }</style>FormData

这里发送数据用到了 FormData，如果编码类型被设为 "multipart/form-data"，它会利用和表单一样的格式。

FormData.append()

会添加一个新值到 FormData 工具内的一个已存在的键中，如果键不存在则会添加该键。
这种方法可以通报 3 个参数，formData.append(name, value, filename)，个中 filename 为可选参数，是传给做事器的文件名称，当一个 Blob 或 File 被作为第二个参数的时候， Blob 工具的默认文件名是 "blob"。
File 工具的默认文件名是该文件的名称。

来源：（亦黑迷失落）https://juejin.cn/post/6977555547570569223