el-upload视频上传

### 使用 `el-upload` 组件实现视频上传 为了使用 `el-upload` 实现视频上传功能，可以基于 Element Plus 的 `el-upload` 组件来构建。下面是一个详细的配置和示例代码展示如何完成这一目标。 #### 1. 基本 HTML 结构与样式调整 通过自定义类名控制上传区域的外观，并确保只接受视频类型的文件： ```html <template> <div> <!-- 设置仅限于图片卡形式显示 --> <el-upload ref="upload" class="video-uploader" :action="uploadUrl" :before-upload="beforeUploadVideo" :on-success="handleSuccess" :on-error="handleError" :limit="1" accept=".mp4,.avi,.mkv"> <el-button type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">支持扩展名为 .mp4, .avi 或者 .mkv 文件</div> </el-upload> <!-- 显示已上传视频预览 --> <video controls v-if="videoUrl !== '' && videoFlag === true" style="width: 100%;"> <source :src="videoUrl" /> 您的浏览器不支持该视频播放。 </video> </div> </template> ``` 此部分HTML结构设置了基本布局并指定了上传接口地址以及一些必要的回调函数[^1]。 #### 2. Vue.js 数据绑定及方法定义 接下来，在Vue实例内部定义所需的数据变量和服务端交互逻辑： ```javascript <script setup lang="ts"> import { ref } from 'vue'; const uploadUrl = '/api/upload'; // 替换成实际的服务端API路径 let videoUrl = ref(''); // 存储返回来的视频链接 let videoFlag = ref(false); // 控制是否显示视频标签 // 在上传前验证文件类型和大小 function beforeUploadVideo(file) { const isVideo = file.type.startsWith('video/'); if (!isVideo) { ElMessage.error('只能上传视频文件!'); } const isLt5M = file.size / 1024 / 1024 < 5; if (!isLt5M) { ElMessage.error('上传视频大小不能超过 5MB!'); } return isVideo && isLt5M; } // 成功后的处理 function handleSuccess(response, file){ console.log(response); videoUrl.value = URL.createObjectURL(file.raw); videoFlag.value = true; setTimeout(() => { videoFlag.value = false; }, 3000); ElMessage({ message: "上传成功", type: "success" }); } // 错误时提示用户 function handleError(err, file){ console.error(err); ElMessage.error(`上传失败`); } </script> ``` 这段脚本实现了前端对于视频文件的选择限制、上传进度监听等功能，并提供了简单的错误反馈机制[^2]。 #### 3. 后端 API 接口设计 (Node.js Express 示例) 服务端需要提供相应的路由来接收客户端发送过来的二进制数据流，并将其保存到服务器本地或其他存储位置。这里给出一个简单例子作为参考： ```javascript const express = require('express'); const multer = require('multer'); const app = express(); app.use(express.json()); // 配置Multer中间件用于解析multipart/form-data请求体中的文件字段 var storage = multer.diskStorage({ destination(req, file, cb) { cb(null, './uploads/') }, filename(req, file, cb) { cb(null, `${Date.now()}-${file.originalname}`) } }) var upload = multer({storage}); // 定义POST /api/upload 路由处理器 app.post('/api/upload', upload.single('file'), function(req, res){ try{ let filePath = req.file.path.replace(/\\/g,'/'); res.status(200).json({url:`http://localhost:${port}/${filePath}`}); }catch(e){ console.error(e.message); res.sendStatus(500); } }); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`Server running on http://localhost:${port}/`)); ``` 上述代码片段展示了如何利用 Node.js 和 Multer 库搭建简易的 RESTful API 来处理来自前端的应用程序所提交的视频文件[^3]。