断点续传是指在文件上传过程中，如果上传中断，可以从上传中断的地方开始继续上传，避免重新上传整个文件。在使用
Vue、
Element、
Axios 和
Qs 实现断点续传时，可以按照以下步骤进行操作：
1. 前端页面部分
在前端页面中，可以使用
Element 组件库来实现上传文件的功能。例如可以使用 el-upload 组件来上传文件，代码如下：
```
<template>
<el-upload
class="upload-demo"
action="yourUploadUrl"
:auto-upload="false"
:on-change="handleChange"
:data="uploadData"
:file-list="fileList"
:http-request="uploadFile"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" :disabled="!fileList.length" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>
```
在模板中，el-upload 组件的属性值中，我们需要设置以下内容：
- `action` 属性：设置上传文件的地址。
- `auto-upload` 属性：设置是否自动上传。
- `on-change` 属性：设置文件上传状态改变时的回调函数。
- `data` 属性：设置上传文件时需要携带的参数。
- `file-list` 属性：设置已经上传的文件列表。
- `http-request` 属性：设置文件上传的函数，我们在这里定义上传文件的逻辑。
接下来，我们需要在 data 函数中定义 fileList 和 uploadData 对象，代码如下：
```
data() {
return {
fileList: [],
uploadData: {
chunkSize: 1024 * 1024, // 文件切片大小
chunks: 0, // 切片总数
chunkIndex: 0, // 当前切片编号
fileSize: 0, // 文件大小
fileName: '', // 文件名
fileMd5: '', // 文件md5值
uploadUrl: '', // 上传接口地址
},
}
},
```
在这里，我们需要定义上传文件时需要携带的参数。其中，chunkSize 表示每个切片的大小，chunks 表示总共需要切片的数量，chunkIndex 表示当前上传的切片编号，fileSize 表示文件的大小，fileName 表示文件的名称，fileMd5 表示文件的 md5 值，uploadUrl 表示上传接口的地址。
然后，我们需要在 methods 函数中定义 handleChange、uploadFile 和 submitUpload 函数。其中，handleChange 函数用来监听文件上传状态的改变，uploadFile 函数用来上传文件，submitUpload 函数用来提交上传请求。代码如下：
```
methods: {
handleChange(file) {
this.fileList = [file]
this.uploadData.fileSize = file.size
this.uploadData.fileName = file.name
this.uploadData.fileMd5 = 'md5'
this.uploadData.uploadUrl = 'uploadUrl'
this.uploadData.chunks = Math.ceil(file.size / this.uploadData.chunkSize)
},
async uploadFile(file) {
const index = this.uploadData.chunkIndex++
const startByte = index * this.uploadData.chunkSize
const endByte = Math.min((index + 1) * this.uploadData.chunkSize, this.uploadData.fileSize)
const chunkFile = file.slice(startByte, endByte)
const formData = new FormData()
formData.append('file', chunkFile)
formData.append('chunkIndex', index)
formData.append('fileName', this.uploadData.fileName)
formData.append('fileMd5', this.uploadData.fileMd5)
const { data } = await this.$
axios.post(this.uploadData.uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
if (index === this.uploadData.chunks - 1) {
console.log('upload success')
} else {
this.uploadFile(file)
}
},
async submitUpload() {
if (!this.fileList.length) return
this.uploadData.chunkIndex = 0
await this.uploadFile(this.fileList[0].raw)
}
},
```
在这里，handleChange 函数将上传文件的基本信息保存到 uploadData 对象中，uploadFile 函数用来上传文件，submitUpload 函数用来提交上传请求。其中，uploadFile 函数是核心部分，它通过循环上传每个切片，如果上传成功，则继续上传下一个切片，否则重新上传当前切片。
2. 后端接口部分
在后端接口中，需要实现文件上传的逻辑。由于是断点续传，所以需要实现上传切片、合并切片的功能。例如可以使用 Node.js 和 Express
框架来实现上传文件的功能，代码如下：
```
const express = require('express')
const multer = require('multer')
const path = require('path')
const fs = require('fs')
const app = express()
app.use(express.static('public'))
app.post('/upload', multer({ dest: 'uploads/' }).single('file'), (req, res) => {
const { fileName, fileMd5, chunkIndex } = req.body
const chunkFile = req.file
const chunkDir = path.join(__dirname, `./uploads/${fileMd5}`)
const filePath = path.join(chunkDir, `${fileName}-${chunkIndex}`)
if (!fs.existsSync(chunkDir)) {
fs.mkdirSync(chunkDir)
}
fs.renameSync(chunkFile.path, filePath)
res.json({
code: 0,
message: '上传成功',
})
})
app.post('/merge', (req, res) => {
const { fileName, fileMd5, chunks } = req.body
const chunkDir = path.join(__dirname, `./uploads/${fileMd5}`)
const filePath = path.join(chunkDir, fileName)
const chunkPaths = []
for (let i = 0; i < chunks; i++) {
chunkPaths.push(path.join(chunkDir, `${fileName}-${i}`))
}
let ws = fs.createWriteStream(filePath)
chunkPaths.forEach((chunkPath) => {
let rs = fs.createReadStream(chunkPath)
rs.on('end', () => {
fs.unlinkSync(chunkPath)
})
rs.pipe(ws, { end: false })
})
ws.on('close', () => {
fs.rmdirSync(chunkDir)
res.json({
code: 0,
message: '上传成功',
})
})
})
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
})
```
在这里，我们实现了两个接口，一个是上传切片的接口 `/upload`，一个是合并切片的接口 `/merge`。其中，上传切片的接口会将上传的切片保存到指定的目录下，并返回上传成功的消息；合并切片的接口会将上传的所有切片合并成一个完整的文件，并删除上传的切片。注意，在合并切片的过程中，需要使用 fs.createWriteStream 和 fs.createReadStream 将切片合并成一个完整的文件。
以上就是使用
Vue、
Element、
Axios 和
Qs 实现文件上传的断点续传的完整流程。
本文详细介绍了如何使用Vue进行单页面开发，包括配置本地环境、创建Vue项目、安装Element、axios、qs、Vant和echartsjs等常用插件，并提供了相关引入和使用示例。
最低0.47元/天 解锁文章
扫一扫
2860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
