vue+elementUI同时上传视频和图片并回显实现过程
更新时间：2026年02月24日 10:38:19 作者：一只开心鸭！
文章介绍了一种根据文件名或URL后缀判断文件类型（图片或视频）的方法,并提供了完整的代码示例,包括子组件和父组件的实现,总结指出,该方法适用于快速分类文件类型,并附带了实际代码供参考
1.效果
2.数据结构
根据name或url后缀来判断是图片或者视频类型
fileList = [
{name:'123.mp4',url:'123.mp4'},
{name:'124.png',url:'https://img0.baidu.com/it/u=1942253063,3807598283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
{name:'hahagwe.png',url:'https://img0.baidu.com/it/u=1040225459,210273596&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'},
]
3.判断是否是图片或者视频的方法
//图片视频匹配
matchType(name){
//后缀获取
let suffic = '';
//获取类型结果
let result = '';
try {
let fileArr = name.split('.');
suffic = fileArr[fileArr.length - 1]
// console.log('suffic',suffic);
} catch (error) {
suffic = ''
}
//图片格式
var imgList = ['png','jpg','jpeg','bmp','gif'];
//进行图片匹配
result = imgList.some(item=>{
return item === suffic
})
// console.log('结果',result);
if(result){
result = 'image';
// console.log('结果',result);
return result
}
},
4.全部代码展示—>子组件
<template>
<div style="display: inline-flex;">
<div class="img-list-item common mb_10" v-for="(item,index) in fileList" :key="index">
<video v-if="!(matchType(item.name))" :style="{width:w,height:h,margin:'0 9px'}" controls="controls" :src="item.url"> 您的浏览器不支持视频播放</video>
<el-image
v-if="matchType(item.name)"
@mouseover="srcList = [item.url]"
:preview-src-list="srcList"
:style="{width:w,height:h,margin:'0 9px'}"
:src="item.url"
fit="cover"></el-image>
<i class="del-img" @click="forkImage(index)" v-if='isShowImg==true'></i>
</div>
<div v-if="maxlength<limit" @click="change">
<el-upload action="https://hrm-oss-dbg.oss-cn-chengdu.aliyuncs.com"
:data="dataObj" :show-file-list="false"
:auto-upload="true"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:on-progress="uploadVideoProcess">
<span class="warpss" :style="{width:w,height:h,lineHeight:h}" v-if='isShowImg==true'>
<i v-else class="el-icon-plus" :style="{color:'#8C939D',fontSize: '18px',fontWeight:'bold',padding:paddings}"></i>
</span>
</el-upload>
</div>
</div>
</template>
<script>
import {
policy1
} from '@/api/oss'//oss上传接口
export default {
props: {
//是否需要上传图片(false:需要,true:不需要,只能查看图片不能做任何操作)
isShowImg: {
type: Boolean,
default: false
},
//个数显示
limit:{
type:Number,
default: 5
},
maxlength:{
type:Number
},
value: Array,
//最大上传图片数量
maxCount: {
type: Number,
default: 5
},
//宽度
w: {
type: String,
// default:'100px'
},
//高度
h: {
type: String,
// default:'100px'
},
paddings: {
type: String,
}
},
data: function() {
return {
srcList:[],
videoFlag: false,
isShow:true,
videoUploadPercent: 0,
count:5,
videis: false,
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dialogVisible: false,
dialogImageUrl: []
}
},
computed: {
fileList() {
this.$emit('videoData23',this.value);
return this.value;
}
},
mounted() {
if(this.fileList.length<this.limit){
this.isShow = true;
}else{
this.isShow = false;
}
},
methods: {
//图片视频匹配
matchType(name){
//后缀获取
let suffic = '';
//获取类型结果
let result = '';
try {
let fileArr = name.split('.');
suffic = fileArr[fileArr.length - 1]
// console.log('suffic',suffic);
} catch (error) {
suffic = ''
}
//图片格式
var imgList = ['png','jpg','jpeg','bmp','gif'];
//进行图片匹配
result = imgList.some(item=>{
return item === suffic
})
// console.log('结果',result);
if(result){
result = 'image';
// console.log('结果',result);
return result
}
},
//删除视频/图片
forkImage(index) {
var data = this.fileList.splice(index, 1);
this.$emit("delFile", this.fileList);
if(this.fileList.length<this.limit){
this.isShow = true;
}else{
this.isShow = false;
}
},
change(){
// console.log('点',this.fileList)
if(this.fileList.length<this.limit){
this.isShow = true;
}else{
this.isShow = false;
}
},
getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
},
emitInput(fileList) {
let value = [];
for (let i = 0; i < fileList.length; i++) {
value.push(fileList[i].url);
}
this.$emit('input', value)
},
handleRemove(file, fileList) {
this.emitInput(fileList)
},
//上传图片/视频成功后的操作
handleUploadSuccess(res, file) {
console.log("成功后", file)
let url = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
this.fileList.push({
name: file.name,
url: url
});
this.emitInput(this.fileList);
this.dialogVisible = true;
this.videoUploadPercent = 0;
if(this.fileList.length<this.limit){
this.isShow = true;
}else{
this.isShow = false;
this.$message({
message: '最多只能上传' + this.limit + '个视频/张图片',
type: 'warning',
duration: 1000
});
}
},
//进度条
uploadVideoProcess(event, file, fileList) {
// this.videoFlag = true;
this.videoUploadPercent = Math.floor(event.percent);
},
beforeUpload(file) {
// this.videoFlag = true;
//视频/图片校验
if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb','image/jpeg','image/PNG','image/gif'].indexOf(file.type) == -1) {
this.$message.error('请上传正确的视频/图片格式');
return false;
}
//以下为oss上传接口
// const _self = this;
// return new Promise((resolve, reject) => {
// policy1().then(response => {
// _self.dataObj.policy = response.data.policy;
// _self.dataObj.signature = response.data.signature;
// _self.dataObj.ossaccessKeyId = response.data.accessid;
// _self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
// _self.dataObj.dir = response.data.dir;
// _self.dataObj.host = response.data.host;
// // _self.dataObj.callback = response.data.callback;
// resolve(true)
// }).catch(err => {
// console.log(err)
// reject(false)
// })
// })
},
}
}
</script>
<style lang="scss" scoped>
.warpss {
display: inline-block;
border: 1px dashed #DEE5ED;
}
::v-deep.el-upload-list {
display: none;
}
.el-upload-video {
width: 149px;
height: 149px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.el-upload-video-i {
font-size: 20px;
font-weight: bold;
padding-top: 43px;
color: #8c939d;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
//视频
.img-list-item {
position: relative;
margin: auto;
}
.img-list-item i.del-img {
width: 20px;
height: 20px;
display: inline-block;
background: rgba(0, 0, 0, .6);
background-image: url(../assets/images/close.png);
background-size: 18px;
background-repeat: no-repeat;
background-position: 50%;
position: absolute;
top: 0;
right: 9px;
}
</style>
5.父组件
(记得在父组件里面引入并注册子组件哦，在这就写了哈。)
<template>
<div class="app-container">
<upload-img :isShowImg="isShowImg" :maxlength="slider_image.length" :limit="5" w="150px" h="150px" v-model="slider_image"></upload-img>
</div>
</template>
<script>
export default {
data(){
return{
slider_image:[
{name:'123.mp4',url:'123.mp4'},
{name:'124.png',url:'https://img0.baidu.com/it/u=1942253063,3807598283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
{name:'hahagwe.png',url:'https://img0.baidu.com/it/u=1040225459,210273596&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'},
]
},
methods:{
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue3中watch用法与最佳实践的相关资料,watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法,可以通过watch动态改变关联的状态,需要的朋友可以参考下2021-07-07
本篇文章主要介绍了详解VUE中v-bind的基本用法 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue-element的select下拉框赋值实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue引用CSS样式实现手机充电效果,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
最近vue.js 非常火热，小编也趁机学习了下vuejs的一些基础知识，于是尝试做一个像微信平台里的菜单编辑器功能，下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家，需要的朋友参考下2018-05-05
el-radio-group中的area-hidden报错的问题解决
本文主要介绍了el-radio-group中的area-hidden报错的问题解决,下面就来介绍几种解决方法,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
这篇文章主要介绍了Vue父子模版传值及组件传值的三种方法,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了vue-cli3 打包优化之 splitchunks的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了Vue动态表单的应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
下面小编就为大家分享一篇vue中v-for加载本地静态图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论