vue 实现上传视频
使用 Vue 实现视频上传功能
准备工作
确保项目中已安装 Vue 和必要的依赖（如 axios 用于网络请求）。通过 npm 或 yarn 安装：
npm install axios前端组件实现
创建一个 Vue 组件（如 VideoUpload.vue），包含文件选择表单和上传逻辑：
<template>
<div>
<input type="file" accept="video/*" @change="handleFileChange" />
<button @click="uploadVideo" :disabled="!file">上传</button>
<p v-if="progress">{{ progress }}%</p>
<p v-if="message">{{ message }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
progress: 0,
message: ''
};
},
methods: {
handleFileChange(e) {
this.file = e.target.files[0];
},
async uploadVideo() {
if (!this.file) return;
const formData = new FormData();
formData.append('video', this.file);
try {
const response = await axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent) => {
this.progress = Math.round(
(progressEvent.loaded / progressEvent.total) * 100
);
}
});
this.message = '上传成功: ' + response.data.url;
} catch (error) {
this.message = '上传失败: ' + error.message;
}
}
}
};
</script>后端接口处理
假设使用 Node.js（Express）作为后端，处理上传请求的示例代码：
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('video'), (req, res) => {
if (!req.file) {
return res.status(400).send('未上传文件');
}
res.json({ url: `/videos/${req.file.filename}` });
});
app.listen(3000, () => console.log('服务器运行中'));关键点说明
- 文件类型限制：通过
accept="video/*"限制用户只能选择视频文件。 - 进度显示：利用
axios的onUploadProgress回调实现上传进度条。 - 跨域问题：若前后端分离，需在后端配置 CORS（如
cors中间件）。
扩展功能
- 视频预览：使用
URL.createObjectURL在上传前生成临时预览链接。 - 分块上传：对大文件可用
File.slice()分块上传，后端需支持合并。 - 格式验证：通过文件对象的
type属性进一步验证视频格式（如video/mp4）。
注意事项
- 安全性：后端需校验文件类型和大小，避免恶意上传。
- 存储路径：生产环境建议使用云存储（如 AWS S3 或阿里云 OSS）。
- 错误处理：捕获并反馈网络错误或服务器异常。
