vue el-upload 支持上传vedio也能上传图片
时间: 2023-07-19 09:35:55 浏览: 96
vue实现图片上传功能
是的,Vue 的 Element-UI 中的 el-upload 组件可以同时上传视频和图片文件。你可以通过设置 accept 属性为 "video/*,image/*" 来限制上传文件类型为视频和图片文件。以下是一个简单的示例:
```html
<template>
<el-upload
class="upload-demo"
action="/your-upload-api"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:accept="'video/*,image/*'"
: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/*,image/*",同时设置 action 属性为上传视频和图片的 API 接口地址。用户选择视频或图片文件后,可以点击上传按钮将文件上传到服务器。同时,我们也可以通过 on-preview 和 on-remove 属性来监听文件预览和文件删除事件。
阅读全文