一、考察点
在Vue项目中,大图片和多数据Excel等大文件的上传是一个非常常见的需求。然而,由于文件大小较大,上传速度很慢,传输中断等问题也难以避免。因此,为了提高上传效率和成功率,我们需要使用切片上传的方式,实现文件秒传、断点续传、错误重试、控制并发等功能,并绘制进度条。
在本文中,我们将从以下三个角度考察这个技术:
技术方案:如何实现切片上传、文件秒传、断点续传、错误重试、控制并发等功能;
代码示例:基于Vue框架,如何使用axios库和element-ui组件库实现以上功能;
总结:该技术的优点和局限性,推荐应用场景和未来发展方向。
二、技术方案
1. 实现切片上传
切片上传是指将大文件分成若干小块进行上传,这样不仅减轻了服务器的压力,还可以提高上传效率。我们使用File API进行文件切割,将文件分割成固定大小的块(例如每个块的大小为1MB),并通过FormData将每个块上传到服务器。
2. 文件秒传
文件秒传是指当上传同一个文件时,如果该文件已经存在于服务器上,就不需要再次上传,而是直接返回服务器中已有该文件的地址。实现文件秒传可以通过计算文件的MD5校验值进行判断。
3. 断点续传
断点续传是指当文件上传中断时,再次上传时可以从上一次断点处继续上传,而不需要重新上传整个文件。实现断点续传可以记录上传进度,以及每个块上传的状态(已上传、未上传、上传失败),并在上传时根据这些信息判断需要上传的块。
4. 错误重试
由于网络等原因,上传可能会失败。为了避免上传失败,我们需要对上传过程进行错误处理和重试。我们可以设置一个最大重试次数,在上传失败后进行重试,直到达到最大重试次数为止。
5. 控制并发
由于上传需要占用带宽和服务器资源,同时上传多个文件或多个块可能会引起带宽和服务器资源紧张。因此,我们需要限制同时上传的文件数和块数,防止过度占用带宽和服务器资源。
三、代码示例
以下是一个基于Vue框架,使用axios库和element-ui组件库实现切片上传的示例代码:
<template>
<div>
<!--上传组件-->
<el-upload
class="upload-demo"
:action="uploadUrl" // 上传地址
:auto-upload="false" // 禁用自动上传
:on-change="handleChange" // 文件选择时触发
:before-upload="handleBeforeUpload" // 文件上传前触发
:on-progress="handleProgress" // 上传进度变化时触发
>
<el-button slot="trigger">选取文件</el-button> // 选择文件按钮
<!--上传文件按钮-->
<el-button style="margin-left: 10px" type="primary" :loading="uploading" :disabled="files.length === 0" @click="handleUpload">
上传文件
</el-button>
<div class="clearfix"></div>
<el-progress :percentage="percent"></el-progress> // 上传进度条
</el-upload>
</div>
</template>
<script>
import axios from 'axios';
import { ElMessage } from 'element-ui'; // 引入Element UI库中的消息提示组件
export default {
data() {
return {
files: [], // 选中的文件列表
uploading: false, // 是否正在上传
percent: 0, // 上传进度
uploadUrl: 'https://your.upload.url' // 上传地址
};
},
methods: {
// 切片上传
async upload(file) {
const chunkSize = 1024 * 1024; // 每个块的大小为 1MB
const fileSize = file.size; // 文件大小
const chunks = Math.ceil(fileSize / chunkSize); // 总块数
const tasks = []; // 上传任务数组
let uploaded = 0; // 已上传块数
// 文件切割
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, fileSize);
tasks.push(
new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('chunk_index', i); // 块编号
formData.append('chunk_count', chunks); // 总块数
formData.append('file_id', file.id); // 文件ID
formData.append('chunk_data', file.slice(start, end)); // 块数据
axios
.post(this.uploadUrl, formData) // 上传块数据
.then(res => {
uploaded++;
this.percent = Math.floor((uploaded / chunks) * 100);
resolve();
})
.catch(err => {
reject(err);
});
})
);
}
// 待所有块上传完成后,发送合并请求
await Promise.all(tasks);
## ❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/fedba1cc82f3c3faf37159f2ddaa37ba.webp?x-oss-process=image/format,png)
>
待所有块上传完成后,发送合并请求
await Promise.all(tasks);
## ❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
> [外链图片转存中...(img-7iPIicQy-1718461703486)]
>