vue el-upload 支持上传vedio
时间: 2023-07-07 17:44:17 浏览: 87
是的,Vue 的 Element-UI 中的 el-upload 组件支持上传 video 文件。你可以通过设置 accept 属性为 "video/*" 来限制上传文件类型为视频文件。同时,你也可以通过设置 action 属性来指定上传视频的 API 接口地址。以下是一个简单的示例:
```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"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<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>
```
在上面的代码中,我们设置 accept 属性为 "video/*",同时设置 action 属性为上传视频的 API 接口地址。用户选择视频文件后,可以点击上传按钮将视频文件上传到服务器。同时,我们也可以通过 on-preview 和 on-remove 属性来监听文件预览和文件删除事件。
阅读全文