断点续传是指在文件
上传过程中，如果因为网络或其他原因导致
上传中断，可以在中断的位置继续
上传，而不需要重新
上传整个文件。下面是使用 Vue + Element + Axios + qs
实现断点续传的步骤：
1.
安装 Element 和 Axios
```
npm install element-ui axios --save
```
2. 创建
上传组件
在 Vue 的组件中，使用 Element 的
上传组件和 Axios 进行文件
上传。首先，我们需要在模板中添加一个
上传组件：
```html
<el-
upload
class="
upload-demo"
ref="
upload"
:action="
uploadUrl"
:data="
uploadData"
:file-list="fileList"
:auto-
upload="false"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submit
Upload">
上传到服务器</el-button>
<div slot="tip" class="el-
upload__tip">只能
上传jpg/png文件，且不超过500kb</div>
</el-
upload>
```
其中，`
uploadUrl` 是
上传接口的地址，`
uploadData` 是
上传接口的参数，`fileList` 是
上传的文件列表，`handleSuccess` 和 `handleError` 是
上传成功和失败的回调函数。
3.
实现上传方法
在 Vue 的方法中，
实现文件
上传的方法：
```javascript
submit
Upload() {
this.$refs.
upload.submit();
},
handleSuccess(response, file, fileList) {
// 处理
上传成功的逻辑
},
handleError(err, file, fileList) {
// 处理
上传失败的逻辑
}
```
在 `submit
Upload` 方法中，调用
上传组件的 `submit` 方法进行文件
上传。在 `handleSuccess` 方法中，处理
上传成功的逻辑，包括显示
上传成功的提示信息、更新文件列表等。在 `handleError` 方法中，处理
上传失败的逻辑，包括显示
上传失败的提示信息、更新文件列表等。
4.
实现断点续传
要
实现断点续传，需要在
上传组件中添加 `before-
upload` 和 `on-
progress` 事件，分别处理
上传前和
上传中的逻辑。在 `before-
upload` 事件中，检查文件是否已经
上传过，如果
上传过，就设置
上传的起点为上次
上传结束的位置，否则
上传整个文件。在 `on-
progress` 事件中，更新
上传进度。
```html
<el-
upload
class="
upload-demo"
ref="
upload"
:action="
uploadUrl"
:data="
uploadData"
:file-list="fileList"
:auto-
upload="false"
:before-
upload="before
Upload"
:on-
progress="on
Progress"
:on-success="handleSuccess"
:on-error="handleError"
>
```
```javascript
before
Upload(file) {
// 判断文件是否已经
上传过
if (localStorage.getItem(file.name)) {
// 设置
上传的起点为上次
上传结束的位置
this.
uploadData.start = JSON.parse(localStorage.getItem(file.name)).end;
} else {
//
上传整个文件
this.
uploadData.start = 0;
}
},
on
Progress(event, file, fileList) {
// 更新
上传进度
const
progress = Math.round((event.loaded / event.total) * 100);
this.$set(file, "
progress",
progress);
}
```
在 `before-
upload` 事件中，使用 `localStorage` 存储文件
上传结束位置，以便下次继续
上传。在 `on-
progress` 事件中，计算
上传进度并更新文件列表中对应文件的
进度。
5.
实现暂停
上传和恢复
上传
要
实现暂停
上传和恢复
上传，可以在
上传组件中添加两个按钮，分别用于暂停和恢复
上传。在暂停
上传时，保存
上传进度并中止
上传。在恢复
上传时，从上次保存的
上传进度开始
上传。
```html
<el-
upload
...
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submit
Upload">
上传到服务器</el-button>
<el-button size="small" type="warning" v-show="!is
Uploading" @click="resume
Upload">恢复
上传</el-button>
<el-button size="small" type="danger" v-show="is
Uploading" @click="pause
Upload">暂停
上传</el-button>
<div slot="tip" class="el-
upload__tip">只能
上传jpg/png文件，且不超过500kb</div>
</el-
upload>
```
```javascript
data() {
return {
is
Uploading: false,
uploadProgress: 0
};
},
methods: {
submit
Upload() {
this.$refs.
upload.submit();
this.is
Uploading = true;
},
pause
Upload() {
this.$refs.
upload.abort();
this.is
Uploading = false;
},
resume
Upload() {
this.$refs.
upload.submit();
this.is
Uploading = true;
},
before
Upload(file) {
...
},
on
Progress(event, file, fileList) {
...
this.
uploadProgress =
progress;
file.
progress =
progress;
}
}
```
在 Vue 的数据中，添加 `is
Uploading` 和 `
uploadProgress` 两个变量，分别表示
上传状态和
上传进度。在方法中，
实现暂停
上传和恢复
上传的逻辑，使用 `is
Uploading` 变量控制按钮的显示。在 `before-
upload` 和 `on-
progress` 事件中，更新
上传状态和
上传进度。
6. 完整代码
```html
<template>
<div>
<el-
upload
class="
upload-demo"
ref="
upload"
:action="
uploadUrl"
:data="
uploadData"
:file-list="fileList"
:auto-
upload="false"
:before-
upload="before
Upload"
:on-
progress="on
Progress"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submit
Upload">
上传到服务器</el-button>
<el-button size="small" type="warning" v-show="!is
Uploading" @click="resume
Upload">恢复
上传</el-button>
<el-button size="small" type="danger" v-show="is
Uploading" @click="pause
Upload">暂停
上传</el-button>
<div slot="tip" class="el-
upload__tip">只能
上传jpg/png文件，且不超过500kb</div>
</el-
upload>
</div>
</template>
<script>
import {
Upload, Button } from "element-ui";
import axios from "axios";
import qs from "qs";
export default {
name: "
UploadComponent",
components: {
"el-
upload":
Upload,
"el-button": Button
},
data() {
return {
is
Uploading: false,
uploadProgress: 0,
uploadUrl: "/
upload",
uploadData: {
start: 0
},
fileList: []
};
},
methods: {
submit
Upload() {
this.$refs.
upload.submit();
this.is
Uploading = true;
},
pause
Upload() {
this.$refs.
upload.abort();
this.is
Uploading = false;
},
resume
Upload() {
this.$refs.
upload.submit();
this.is
Uploading = true;
},
before
Upload(file) {
if (localStorage.getItem(file.name)) {
this.
uploadData.start = JSON.parse(localStorage.getItem(file.name)).end;
} else {
this.
uploadData.start = 0;
}
},
on
Progress(event, file, fileList) {
const
progress = Math.round((event.loaded / event.total) * 100);
this.
uploadProgress =
progress;
file.
progress =
progress;
localStorage.setItem(
file.name,
JSON.stringify({
end: this.
uploadData.start + event.loaded
})
);
},
handleSuccess(response, file, fileList) {
this.fileList = fileList;
this.is
Uploading = false;
localStorage.removeItem(file.name);
this.$message({
message: "
上传成功",
type: "success"
});
},
handleError(err, file, fileList) {
this.fileList = fileList;
this.is
Uploading = false;
this.$message.error("
上传失败");
}
}
};
</script>
```
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
