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

记录一次使用上传文件的缩略图自定义   区分上传文件格式   并封装成组件 

  

 

照片墙

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

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

您的浏览器不支持 video 标签。 您的浏览器不支持该音频格式。 您的浏览器不支持 video 标签。 您的浏览器不支持该音频格式。 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 + "/common/upload", // 上传的图片服务器地址 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; }, },};