vue+elementUI同时上传视频和图片并回显 |
您所在的位置：网站首页 › 小学生科技制作的图片和视频或视频 › vue+elementUI同时上传视频和图片并回显 |
vue+elementUI同时上传视频和图片并回显
|
1.效果 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.全部代码展示—>子组件 您的浏览器不支持视频播放 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.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.isShow = false; } }, change(){ // console.log('点',this.fileList) if(this.fileList.length 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 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.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) // }) // }) }, } } .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; }5.父组件(记得在父组件里面引入并注册子组件哦,在这就写了哈,各位宝儿~) 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:{ } } |
2.数据结构;根据name或url后缀来判断是图片或者视频类型【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |