vue上传视频实现
使用 <input type="file"> 上传视频
创建文件选择控件，限制文件类型为视频格式（如 .mp4, .webm）。通过 @change 事件监听文件选择，获取 File 对象：
<template>
<input type="file" accept="video/*" @change="handleFileUpload" />
</template>
<script>
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (file && file.type.includes('video')) {
// 处理上传逻辑
}
}
}
}
</script>预览视频内容
通过 URL.createObjectURL 生成临时链接实现前端预览：
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
const videoUrl = URL.createObjectURL(file);
this.$refs.videoElement.src = videoUrl; // 绑定到<video>标签
}
}
}需在模板中添加 <video ref="videoElement" controls></video>。
分片上传大视频文件
使用 File.slice() 分割文件，配合 FormData 逐块上传：
async uploadChunks(file) {
const chunkSize = 5 * 1024 * 1024; // 5MB分片
let offset = 0;
while (offset < file.size) {
const chunk = file.slice(offset, offset + chunkSize);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('offset', offset);
await axios.post('/upload', formData);
offset += chunkSize;
}
}后端接收与合并
后端需实现分片接收和最终合并逻辑。示例 Node.js 代码：
const fs = require('fs');
app.post('/upload', (req, res) => {
const { chunk, offset } = req.files;
const stream = fs.createWriteStream('output.mp4', { flags: offset ? 'r+' : 'w' });
stream.write(chunk.data, () => stream.end());
});进度显示
通过 Axios 的 onUploadProgress 事件监听上传进度：
axios.post('/upload', formData, {
onUploadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
console.log(`进度: ${percent}%`);
}
})断点续传实现
记录已上传分片信息，重新上传时跳过已完成部分：
// 前端保存已上传的offset
localStorage.setItem('lastOffset', offset);
// 下次上传时读取
const lastOffset = parseInt(localStorage.getItem('lastOffset')) || 0;注意事项
- 服务端需配置请求体大小限制（如 Nginx 的
client_max_body_size）。 - 视频格式验证应同时检查文件头和扩展名。
- 生产环境建议使用七牛云、阿里云 OSS 等第三方存储服务。
