<template> <div class="upload-file"> <el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileArr" :limit="5" :list-type="listType" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-preview="handleFileClick" :on-change="fileChange" :show-file-list="true" :on-remove="handleRemove" :headers="headers" class="upload-file-uploader" :class="{ hide: fileArr.length>0 ||addShow }" ref="upload" > <!-- 上传按钮 --> <el-button plain type="primary" :disabled="disabled" @click="deleteFile()">选取文件</el-button> <!--<i class="el-icon-plus"></i>--> <!-- 上传提示 --> <div class="el-upload__tip" slot="tip" v-if="showTip"> 请上传 <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> 的文件,且不超过五个 </div> </el-upload> <el-image v-show="false" id="img" ref="previewImg" :src="dialogImageUrl" :preview-src-list="bigImageArr" :z-index="9999999" ></el-image> <!-- <el-dialog :center="true" width="50%" :modal="modal" :visible.sync="dialogVisible" > <img :src="dialogImageUrl" alt="" /> </el-dialog> --> <!-- 文件列表 --> <!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list"> <el-link :href="file.url" :underline="false" target="_blank"> <span class="el-icon-document"> {{ getFileName(file.name) }} </span> </el-link> <div class="ele-upload-list__item-content-action"> <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> </div> </li> </transition-group> --> </div> </template> <script> import { getToken } from "@/utils/auth"; export default { props: { // 值 value: [String, Object, Array], listType: { type: String, defaule: "text", }, // 大小限制(MB) fileSize: { type: Number, default: 5, }, fileArr: { type: Array, default: [], }, // 文件类型, 例如['png', 'jpg', 'jpeg'] fileType: { type: Array, default: () => ['png', 'jpg', 'jpeg'], }, // 是否显示提示 isShowTip: { type: Boolean, default: true, }, disabled: { type: Boolean, default:false, }, }, data() { return { uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 headers: { Authorization: "Bearer " + getToken(), }, fileList: [], modal: false, dialogVisible: false, dialogImageUrl: "", addShow: true, }; }, computed: { deleteFile(){ this.fileList=[] this.addShow = false; this.$emit("remove", 1); }, // 是否显示提示 showTip() { return this.isShowTip && (this.fileType || this.fileSize); }, // 列表 list() { let temp = 1; if (this.value) { // 首先将值转为数组 const list = Array.isArray(this.value) ? this.value : [this.value]; // 然后将数组转为对象数组 return list.map((item) => { if (typeof item === "string") { item = { name: item, url: item }; } item.uid = item.uid || new Date().getTime() + temp++; return item; }); } else { this.fileList = []; return []; } }, bigImageArr() { return [this.dialogImageUrl] }, }, methods: { // 上传前校检格式和大小 handleBeforeUpload(file) { // 校检文件类型 if (this.fileType) { let fileExtension = ""; if (file.name.lastIndexOf(".") > -1) { fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); } const isTypeOk = this.fileType.some((type) => { if (file.type.indexOf(type) > -1) return true; if (fileExtension && fileExtension.indexOf(type) > -1) return true; return false; }); if (!isTypeOk) { this.$message.error( `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!` ); return false; } } // 校检文件大小 if (this.fileSize) { const isLt = file.size / 1024 / 1024 < this.fileSize; if (!isLt) { this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`); return false; } } return true; }, // 文件个数超出 handleExceed() { this.$message.error('超过允许上传文件数量'); }, // 上传失败 handleUploadError(err) { this.$message.error("上传失败, 请重试"); }, // 上传成功回调 handleUploadSuccess(res, file) { this.$message.success("上传成功"); this.$emit("resFun", res); }, // 文件列表移除文件 handleRemove(file, fileList) { console.log("列表移除", file, fileList); this.addShow = fileList.length > 0 ? true : false; this.$emit("remove", file); }, // 删除文件 handleDelete(index) { this.fileList.splice(index, 1); this.$emit("input", ""); // let that = this, // param; // param = file.response ? file.response.fileName.replace(/\\/g, "%") // : file.response.url.replace(/\\/g, "%").slice(9); // $.ajax({ // type: "GET", // url: process.env.VUE_APP_BASE_API + "/common/deleteFile", // data: {savePath: param}, // dataType: "json", // success: function(data){ // if (data) that.$message.success("删除成功"); // else return false; // } // }); }, handleFileClick(file, fileList) { this.dialogImageUrl = file.response ? file.response.url : file.url; // this.dialogImageUrl =if(this.fileArr) this.fileArr[0].url; // this.dialogVisible = true; this.$refs.previewImg.showViewer = true; //console.log(file); // console.log(file.response.url) }, // 获取文件名称 getFileName(name) { if (name.lastIndexOf("/") > -1) { return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); } else { return ""; } }, // 当改变列表改变时 fileChange(file, fileList) { this.addShow = fileList.length > 0 ? true : false; }, }, created() { // this.fileList = this.list; this.addShow = this.fileArr.length > 0 ? true : false; }, }; </script> <style scoped lang="scss"> img { width: 100%; } .upload-file-uploader { margin-bottom: 5px; } .upload-file-list .el-upload-list__item { border: 1px solid #e4e7ed; line-height: 2; margin-bottom: 10px; position: relative; } .upload-file-list .ele-upload-list__item-content { display: flex; justify-content: space-between; align-items: center; color: inherit; } .ele-upload-list__item-content-action .el-link { margin-right: 10px; } </style>