vue el-upload 支持上传vedio看不到视频
时间: 2023-07-18 19:37:18 浏览: 173
vue结合el-upload实现腾讯云视频上传功能
是的,Vue 的 Element-UI 中的 el-upload 组件默认不会显示视频的预览图,但你可以通过设置 list-type 属性为 "picture-card" 来显示视频的预览图。以下是一个简单的示例:
```html
<template>
<el-upload
class="upload-demo"
action="/your-upload-api"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:accept="'video/*'"
:auto-upload="false"
list-type="picture-card"
>
<i class="el-icon-plus"></i>
<div class="el-upload__text">将视频拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传视频文件</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handlePreview(file) {
console.log(file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
submitUpload() {
this.$refs.upload.submit();
}
}
};
</script>
```
在上面的代码中,我们设置 list-type 属性为 "picture-card",使 el-upload 组件以卡片形式展示上传的视频文件,并可以显示视频的预览图。用户选择视频文件后,可以点击上传按钮将视频文件上传到服务器。同时,我们也可以通过 on-preview 和 on-remove 属性来监听文件预览和文件删除事件。
阅读全文