快捷導(dǎo)航

vue+elementUI同時(shí)上傳視頻和圖片并回顯實(shí)現(xiàn)過程

更新時(shí)間：2026年02月24日 10:38:19 作者：一只開心鴨！

文章介紹了一種根據(jù)文件名或URL后綴判斷文件類型（圖片或視頻）的方法,并提供了完整的代碼示例,包括子組件和父組件的實(shí)現(xiàn),總結(jié)指出,該方法適用于快速分類文件類型,并附帶了實(shí)際代碼供參考

1.效果

2.數(shù)據(jù)結(jié)構(gòu)

根據(jù)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 = '';
        //獲取類型結(jié)果
        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'];
        //進(jìn)行圖片匹配
        result = imgList.some(item=>{
          return item === suffic
        })
        // console.log('結(jié)果',result);
        if(result){
          result = 'image';
          // console.log('結(jié)果',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
			},
      //個(gè)數(shù)顯示
      limit:{
        type:Number,
        default: 5
      },
      maxlength:{
        type:Number
      },
      value: Array,
      //最大上傳圖片數(shù)量
      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 = '';
        //獲取類型結(jié)果
        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'];
        //進(jìn)行圖片匹配
        result = imgList.some(item=>{
          return item === suffic
        })
        // console.log('結(jié)果',result);
        if(result){
          result = 'image';
          // console.log('結(jié)果',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('點(diǎn)',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 + '個(gè)視頻/張圖片',
            type: 'warning',
            duration: 1000
          });
        }
      },
      //進(jìn)度條
      uploadVideoProcess(event, file, fileList) {
        // this.videoFlag = true;
        this.videoUploadPercent = Math.floor(event.percent);
      },
      beforeUpload(file) {
        // this.videoFlag = true;
        //視頻/圖片校驗(yàn)
         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('請(qǐng)上傳正確的視頻/圖片格式');
                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.父組件

(記得在父組件里面引入并注冊(cè)子組件哦，在這就寫了哈。)

<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>