element upload 文件缩略图模板 同时上传视频和图片并回显 组件封装

记录一次使用上传文件的缩略图模板并且   区分上传文件格式，手写放大显示跟删除方法  以及回显   并封装成组件，比较粗减。

照片墙

使用 list-type 属性来设置文件列表的样式。

但是用的时候上传视频时   回显图片找不到  于是改写一下 封装成组件 

在components里新建vue页面

<template>
  <div>
    <el-upload
      :limit="limit"
      :action="uploadImgUrl"
      :file-list="UrlList"
      list-type="picture-card"
      :on-change="handleImgChange"
      :on-success="handleUploadSuccess"
      :on-exceed="handleExceed"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img
          v-if="file.type == 1"
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt=""
        />
        <video v-if="file.type == 2" :src="file.url" style="width: 100%">
          您的浏览器不支持 video 标签。
        </video>
        <audio
          controls
          v-if="file.type == 3"
          :src="file.url"
          style="width: 100%"
        >
          您的浏览器不支持该音频格式。
        </audio>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleImgRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <img
        v-if="dialogType == 1"
        class="el-upload-list__item-thumbnail"
        width="100%"
        :src="dialogImageUrl"
        alt=""
      />
      <video
        v-if="dialogType == 2"
        style="width: 100%"
        :src="dialogImageUrl"
        controls
        autoplay
      >
        您的浏览器不支持 video 标签。
      </video>
      <audio controls v-if="dialogType == 3">
        <source :src="dialogImageUrl" />
        您的浏览器不支持该音频格式。
      </audio>
    </el-dialog>
  </div>
</template>

 方法用emit监听

<script>
import bus from "../../utils/bus"; 
export default {
  props: {
    // imageUrlList: {
    //   type: Array,
    //   default: () => [],
    // },
    doBySelf: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      limit: 3, //限制上传数量
      uploadImgUrl: process.env.VUE_APP_WEB_URL + "", // 上传的图片服务器地址
      dialogImageUrl: null,
      dialogVisible: false,
      UrlList: [],
      disabled: false,
      dialogType: null,
    };
  },
  methods: {
    //上传
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogType = file.type;
      this.dialogVisible = true;
    },
    // 图片改变
    handleImgChange(file, fileList) { 
        bus.$emit("changeFileAfterList", fileList);
        this.UrlList = fileList; 
    },
    // 图片移除
    handleImgRemove(file, fileList) {
      fileList = this.UrlList; 
        let index = fileList.indexOf(file);
        fileList.splice(index, 1);
        bus.$emit("changeFileAfterList", fileList); 
    },
    //图片上传成功
    handleUploadSuccess(response, file, fileList) {
      file.type = this.matchType(file.response.data.url);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    // 根据文件名后缀区分 文件类型
    /*
     * @param: fileName - 文件名称
     * @param: 数据返回 1) 无后缀匹配 - false
     * @param: 数据返回 2) 匹配图片 - image
     * @param: 数据返回 8) 匹配 视频 - video
     * @param: 数据返回 9) 匹配 音频 - radio
     * @param: 数据返回 10) 其他匹配项 - other
     */
    matchType(fileName) {
      // 后缀获取
      var suffix = "";
      // 获取类型结果
      var result = "";
      try {
        var flieArr = fileName.split(".");
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      // fileName无后缀返回 false
      if (!suffix) {
        result = false;
        return result;
      }
      // 图片格式
      var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
      // 进行图片匹配
      result = imglist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "1";
        return result;
      }
      // 匹配 视频
      var videolist = ["mp4", "m2v", "mkv"];
      result = videolist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "2";
        return result;
      }
      // 匹配 音频
      var radiolist = ["mp3", "wav", "wmv", "flac"];
      result = radiolist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "3";
        return result;
      }
      // 其他 文件类型
      result = "other";
      return result;
    },
  },
};
</script>

在父页面中调用 

   <FileUploadEdit ref="UrlList"></FileUploadEdit>

import FileUploadEdit from "@/components/FileUploadEdit";

 components: {
    FileUploadEdit, 
  },

父页面监听数据变化 写在created()方法里，

   bus.$on("changeFileList", (fileList) => {
      this.ruleForm.imageUrlList = [];
      this.ruleForm.videoUrlList = [];
      this.ruleForm.musicUrlList = [];
      if (fileList.length > 0) {
        fileList.map((item) => {
          if (item.response) {
            if (fileUploadIf(item.response.data.url) == 1) {
              this.ruleForm.imageUrlList.push(item.response.data.url);
            } else if (fileUploadIf(item.response.data.url) == 2) {
              this.ruleForm.videoUrlList.push(item.response.data.url);
            } else if (fileUploadIf(item.response.data.url) == 3) {
              this.ruleForm.musicUrlList.push(item.response.data.url);
            }
          }  
        });
      }
    });

以上是上传文件改写的封装。

/utils/bus.js  自己新建一下

// bus.js
import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue;

export default bus;