基于 Vue + Element plus + Node 实现大文件分片上传，断点续传和秒传的功能！牛哇~
共 20241字，需浏览 41分钟
·
2024-06-20 13:36
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
点击上方 蓝字 关注我们
大家好，我是考拉🐨！
最近，我遇到一个有趣的需求：实现大文件的分片上传、断点续传和秒传功能。
老板说这是为了让用户上传文件时体验更好，上传大文件时不再需要担心网络中断或重复上传的问题。
作为一个技术宅，我立马想去实现这个功能。接下来，我将使用Vue 和 Element Plus 和 node 带大家一起探索如何实现这个复杂但有趣的功能。
项目初始化
首先，我们需要初始化一个 Vue 项目。如果你还没有安装 Vue CLI，可以通过以下命令安装：
npm install -g @vue/cli然后，创建一个新的 Vue 项目：
vue create file-upload-demo
cd file-upload-demo选择默认配置或者根据自己的需求进行配置。创建完成后，进入项目目录并启动开发服务器：
npm run serve安装和配置 Element Plus
为了使用 Element Plus，我们需要先安装它：
npm install element-plus --save在 src/main.js 中引入 Element Plus：
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');实现分片上传
前端代码
首先，我们需要在前端实现文件分片上传的逻辑。在 src/components 目录下创建一个 FileUpload.vue 文件，并添加以下内容：
<template>
<el-upload
class="upload-demo"
ref="upload"
:http-request="uploadFile"
:on-change="handleChange"
:auto-upload="false"
:before-upload="beforeUpload"
:multiple="false">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button @click="submitUpload">上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
file: null,
chunkSize: 2 * 1024 * 1024 // 2MB
};
},
methods: {
handleChange(file) {
this.file = file.raw;
},
beforeUpload(file) {
this.file = file;
return false;
},
async uploadFile() {
const chunkCount = Math.ceil(this.file.size / this.chunkSize);
for (let i = 0; i < chunkCount; i++) {
const chunk = this.file.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', i);
formData.append('fileName', this.file.name);
await this.uploadChunk(formData);
}
},
async uploadChunk(formData) {
try {
const response = await fetch('http://localhost:3000/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
console.log(result);
} catch (error) {
console.error('上传失败:', error);
}
},
submitUpload() {
this.uploadFile();
}
}
};
</script>
<style scoped>
.upload-demo {
display: flex;
flex-direction: column;
}
</style>后端代码
在后端，我们需要处理分片上传的逻辑。以下是一个使用 Node.js 和 Express 实现的示例：
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('chunk'), (req, res) => {
const { index, fileName } = req.body;
const chunkFilePath = path.join(__dirname, 'uploads', `${fileName}-${index}`);
fs.renameSync(req.file.path, chunkFilePath);
res.json({ message: '上传成功', index });
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});实现断点续传
前端代码
为了实现断点续传，我们需要记录已经上传的分片，并在网络中断后继续上传未完成的分片。
<template>
<el-upload
class="upload-demo"
ref="upload"
:http-request="uploadFile"
:on-change="handleChange"
:auto-upload="false"
:before-upload="beforeUpload"
:multiple="false">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button @click="submitUpload">上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
file: null,
chunkSize: 2 * 1024 * 1024, // 2MB
uploadedChunks: []
};
},
methods: {
handleChange(file) {
this.file = file.raw;
},
beforeUpload(file) {
this.file = file;
return false;
},
async uploadFile() {
const chunkCount = Math.ceil(this.file.size / this.chunkSize);
const response = await fetch(`http://localhost:3000/uploaded-chunks?fileName=${this.file.name}`);
this.uploadedChunks = await response.json();
for (let i = 0; i < chunkCount; i++) {
if (this.uploadedChunks.includes(i)) continue;
const chunk = this.file.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', i);
formData.append('fileName', this.file.name);
await this.uploadChunk(formData);
}
},
async uploadChunk(formData) {
try {
const response = await fetch('http://localhost:3000/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
this.uploadedChunks.push(result.index);
console.log(result);
} catch (error) {
console.error('上传失败:', error);
}
},
submitUpload() {
this.uploadFile();
}
}
};
</script>
<style scoped>
.upload-demo {
display: flex;
flex-direction: column;
}
</style>后端代码
后端需要记录已上传的分片，并在客户端请求时返回这些信息。
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('chunk'), (req, res) => {
const { index, fileName } = req.body;
const chunkFilePath = path.join(__dirname, 'uploads', `${fileName}-${index}`);
fs.renameSync(req.file.path, chunkFilePath);
res.json({ message: '上传成功', index });
});
app.get('/uploaded-chunks', (req, res) => {
const { fileName } = req.query;
const uploadedChunks = [];
fs.readdirSync(path.join(__dirname, 'uploads')).forEach(file => {
const match = file.match(new RegExp(`${fileName}-(\\d+)`));
if (match) {
uploadedChunks.push(Number(match[1]));
}
});
res.json(uploadedChunks);
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});实现秒传功能
前端代码
秒传功能依赖于文件的哈希值。在上传前，我们先计算文件的哈希值，并检查服务器是否已经存在相同的文件。
<template>
<el-upload
class="upload-demo"
ref="upload"
:http-request="uploadFile"
:on-change="handleChange"
:auto-upload="false"
:before-upload="beforeUpload"
:multiple="false">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button @click="submitUpload">上传</el-button>
</el
-upload>
</template>
<script>
import SparkMD5 from 'spark-md5';
export default {
data() {
return {
file: null,
chunkSize: 2 * 1024 * 1024, // 2MB
uploadedChunks: [],
fileHash: ''
};
},
methods: {
handleChange(file) {
this.file = file.raw;
},
beforeUpload(file) {
this.file = file;
this.calculateHash(file);
return false;
},
calculateHash(file) {
const chunkSize = this.chunkSize;
const chunks = Math.ceil(file.size / chunkSize);
const spark = new SparkMD5.ArrayBuffer();
let currentChunk = 0;
const fileReader = new FileReader();
fileReader.onload = e => {
spark.append(e.target.result);
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
this.fileHash = spark.end();
console.log('文件哈希值:', this.fileHash);
}
};
const loadNext = () => {
const start = currentChunk * chunkSize;
const end = Math.min(start + chunkSize, file.size);
fileReader.readAsArrayBuffer(file.slice(start, end));
};
loadNext();
},
async uploadFile() {
const response = await fetch(`http://localhost:3000/check-file?hash=${this.fileHash}`);
const { exists } = await response.json();
if (exists) {
console.log('文件已存在，秒传成功');
return;
}
const chunkCount = Math.ceil(this.file.size / this.chunkSize);
const uploadedChunksResponse = await fetch(`http://localhost:3000/uploaded-chunks?fileName=${this.file.name}`);
this.uploadedChunks = await uploadedChunksResponse.json();
for (let i = 0; i < chunkCount; i++) {
if (this.uploadedChunks.includes(i)) continue;
const chunk = this.file.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', i);
formData.append('fileName', this.file.name);
formData.append('hash', this.fileHash);
await this.uploadChunk(formData);
}
},
async uploadChunk(formData) {
try {
const response = await fetch('http://localhost:3000/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
this.uploadedChunks.push(result.index);
console.log(result);
} catch (error) {
console.error('上传失败:', error);
}
},
submitUpload() {
this.uploadFile();
}
}
};
</script>
<style scoped>
.upload-demo {
display: flex;
flex-direction: column;
}
</style>后端代码
后端需要支持文件哈希检查和已存在文件的处理。
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('chunk'), (req, res) => {
const { index, fileName, hash } = req.body;
const chunkFilePath = path.join(__dirname, 'uploads', `${fileName}-${index}`);
fs.renameSync(req.file.path, chunkFilePath);
// 合并文件
const chunkCount = Math.ceil(req.file.size / (2 * 1024 * 1024));
const chunks = [];
for (let i = 0; i < chunkCount; i++) {
chunks.push(fs.readFileSync(path.join(__dirname, 'uploads', `${fileName}-${i}`)));
}
fs.writeFileSync(path.join(__dirname, 'uploads', fileName), Buffer.concat(chunks));
res.json({ message: '上传成功', index });
});
app.get('/uploaded-chunks', (req, res) => {
const { fileName } = req.query;
const uploadedChunks = [];
fs.readdirSync(path.join(__dirname, 'uploads')).forEach(file => {
const match = file.match(new RegExp(`${fileName}-(\\d+)`));
if (match) {
uploadedChunks.push(Number(match[1]));
}
});
res.json(uploadedChunks);
});
app.get('/check-file', (req, res) => {
const { hash } = req.query;
const filePath = path.join(__dirname, 'uploads', hash);
const exists = fs.existsSync(filePath);
res.json({ exists });
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});总结
希望通过本文的介绍，大家能够更深入地了解大文件上传的实现方法，并在实际项目中灵活应用这些技巧，提升用户体验。
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下
评论