el-upload 上传视频预览
时间: 2025-02-21 16:23:49 浏览: 46
### 使用 `el-upload` 实现视频上传与预览
为了实现视频上传和预览的功能,可以基于 `el-upload` 组件并做适当调整。下面提供了一个详细的解决方案。
#### 1. HTML 结构
创建一个用于触发文件选择器的按钮以及显示已选中视频缩略图的位置:
```html
<template>
<div>
<!-- 文件上传 -->
<el-upload
ref="upload"
:on-change="handleChange"
:auto-upload="false"
action=""
accept=".mp4,.avi,.mov">
<el-button slot="trigger" type="primary">选取文件</el-button>
</el-upload>
<!-- 预览区域 -->
<video controls v-if="videoUrl" style="width: 100%; max-width: 600px;">
<source :src="videoUrl" />
Your browser does not support the video tag.
</video>
</div>
</template>
```
此部分通过设置 `accept` 属性限定只允许特定类型的视频文件被选择,并利用 `<video>` 标签展示视频内容[^1]。
#### 2. JavaScript 方法
编写处理文件变化逻辑的方法,当用户选择了新的视频文件时更新页面上的预览链接:
```javascript
<script>
export default {
data() {
return {
videoUrl: ''
};
},
methods: {
handleChange(file) {
const isVideo = file.raw.type.startsWith('video/');
if (!isVideo) {
this.$message.error('请选择有效的视频文件');
return;
}
// 创建对象URL供本地播放使用
this.videoUrl = URL.createObjectURL(file.raw);
}
}
};
</script>
```
这段脚本首先验证所选文件是否为合法的视频格式;如果是,则调用浏览器 API 来生成临时的对象 URL 并赋值给 `videoUrl` 变量以便于后续渲染到视图层[^2]。
#### 3. CSS 样式 (可选)
可以根据实际需求添加一些样式来自定义外观效果,比如控制视频的最大宽度等。
---
阅读全文
相关推荐


















