vue+elementUI同时上传视频和图片并回显

一只开心鸭！

已于 2023-12-20 16:41:38 修改

阅读量6.3k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： elementUI+vue 文章标签： vue.js elementui javascript

于 2022-05-06 16:28:41 首次发布

本文链接：https://blog.youkuaiyun.com/oneya1/article/details/124612734

elementUI+vue 专栏收录该内容

7 篇文章

订阅专栏

这是一个关于Vue组件的实现，用于智能识别图片和视频类型并进行上传。组件通过检查文件名的后缀来判断是图片还是视频，并分别使用`<video>`标签和`<el-image>`组件展示。同时，它支持上传限制、预览功能和删除操作。在父组件中，组件被用来展示和管理一组图片和视频。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>