Elmentui el-upload vue Ruoyi-Vue 同时上传图片和视频，兼容H5 可直接录像拍照组件_若依视频上传组件的注意事项和经验分享-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37882162/article/details/145747469

Elmentui el-upload vue Ruoyi-Vue 同时上传图片和视频，兼容H5 可直接录像拍照组件

很多项目需求都需要上传图片和视频，并且手机端还要录像，看到网上提供了部分案例，就针对这些案例结合ruoyivue的上传组件框架做了一些修改。
Ruoyi-vue直接使用

效果：在这里插入图片描述
自定义参数：
文件格式，正对文件格式进行匹配，H5端直接录像或者拍照
文件大小
上传文件数量
是否打开上传开关：预览效果
组件元素的长、宽

组件逻辑：
el-upload不使用卡片形式，直接自定义一个上传窗口，默认不显示上传的图片。
图片、视频的回显单独控制。使用el-imag 和video来回显。
el-upload复制上传和回传数据

组件代码

<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}" controls="controls"
             :src="item.url"> 您的浏览器不支持视频播放
      </video>
      <el-image
        v-if="matchType(item.name)"
        :preview-src-list="[item.url]"
        :style="{width:w,height:h}"
        :src="item.url"
        fit="cover"></el-image>
      <i class="del-img" @click="forkImage(index)" v-if='isShowUploadBtn'></i>
    </div>
    <div v-if="fileList.length < limit" @click="change">
      <el-upload :action="uploadImgUrl"
                 multiple
                 :accept="fileType.toString()"
                 :show-file-list="false"
                 :limit="limit"
                 :headers="headers"
                 :on-exceed="handleExceed"
                 :auto-upload="true"
                 :on-success="handleUploadSuccess"
                 :before-upload="beforeUpload">
              <span class="warpss" :style="{width:w,height:h,lineHeight:h}" v-if='isShowUploadBtn'>
                <i class="el-icon-plus"
                   :style="{color:'#8C939D',fontSize: '25px',fontWeight:'bold',padding:paddings}"></i>
              </span>
      </el-upload>
    </div>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
//oss上传接口
export default {
  props: {
    fileType: {
      type: Array,
      default: () => ["image/png", "image/jpg", "image/jpeg", "video/mp4"],
      // default: () => ["png", "jpg"],
    },
    //是否需要上传按钮(false:需要  ,true:不需要, 只能查看图片不能做任何操作)
    isShowUploadBtn: {
      type: Boolean,
      default: false
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    //个数显示
    limit: {
      type: Number,
      default: 5
    },
    value: [String, Object, Array],
    //宽度
    w: {
      type: String,
      default: '100px'
    },
    //高度
    h: {
      type: String,
      default: '100px'
    },
    paddings: {
      type: String,
    }
  },
  data: function () {
    return {
      number: 0,
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: []
    }
  },
  mounted() {
    if (this.fileList.length < this.limit) {
      this.isShowUploadBtn = true;
    } else {
      this.isShowUploadBtn = false;
    }
  },
  methods: {
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        if (list[i].url) {
          strs += list[i].url.replace(this.baseUrl, "") + separator;
        }
      }
      return strs != '' ? strs.substr(0, strs.length - 1) : '';
    },
    //图片视频匹配  判断是视频还是图片  ，展示在不同的位置
    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
      })
      if (result) {
        result = 'image';
        return result
      }
    },
    //删除视频/图片
    forkImage(index) {
      this.fileList.splice(index, 1);
      this.$emit("input", this.listToString(this.fileList));
      // this.fileList = data;
      if (this.fileList.length < this.limit) {
        this.isShowUploadBtn = true;
      } else {
        this.isShowUploadBtn = false;
      }
    },
    change() {
      // console.log('点',this.fileList)
      if (this.fileList.length < this.limit) {
        this.isShowUploadBtn = true;
      } else {
        this.isShowUploadBtn = false;
      }
    },
    emitInput() {
      this.$emit("input", this.listToString(this.fileList));
      this.$modal.closeLoading();
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    //上传图片/视频成功后的操作
    handleUploadSuccess(res, file) {
      // let url = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
      this.fileList.push({
        name: res.fileName,
        url: res.url
      });
      this.emitInput();
      if (this.fileList.length < this.limit) {
        this.isShowUploadBtn = true;
      } else {
        this.isShowUploadBtn = false;
      }
      this.$modal.closeLoading();
    },
    beforeUpload(file) {
      let isImg = false;
      if (this.fileType.length) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        isImg = this.fileType.some(type => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
      } else {
        isImg = file.type.indexOf("image") > -1;
      }

      if (!isImg) {
        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片或视频格式文件!`);
        return false;
      }
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传头像图片或视频大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传图片或视频，请稍候...");
      this.number++;
    },
  }
}
</script>
<style lang="scss" scoped>
.warpss {
  display: inline-block;
  border: 1px dashed #247fe5;
}

::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-image: url(../../assets/images/close.png);   //右上角删除的图标，自己去网上下载一个
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: 50%;
  position: absolute;
  top: 0;
  right: 9px;
}
</style>

如何调用组件：

注册组件
全局注册
全局注册组件意味着该组件可以在任何新创建的 Vue 实例的模板中使用。你通常会在应用的入口文件（如 main.js）中全局注册组件。

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

// 全局注册
Vue.component('my-component', MyComponent);

2、局部注册
局部注册意味着该组件只能在注册它的 Vue 实例或父组件的模板中使用。这通常是在单文件组件（.vue 文件）中完成的。


<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    'my-component': MyComponent
  }
};
</script>

我用的是局部注册：

import ImageVideoUpload from "@/components/ImageVideoUpload/index.vue";

  
export default {
components: {'upload-img' : ImageVideoUpload },
}

<template>
 <upload-img :isShowUploadBtn="true"  :limit="2" :file-type="fileTypes(domain.format)"
                            :fileSize="40" w="130px" h="130px" v-model="domain.filePath"></upload-img>
</template>