//上传图片组件 定义文件imageUpload
<template><div class="component-upload-image"><el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess":before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"ref="imageUpload" :on-remove="handleDelete" :show-file-list="true" :headers="headers" :file-list="fileList":on-preview="handlePictureCardPreview" :class="{ hide: this.fileList.length >= this.limit }"><i class="el-icon-plus"></i></el-upload><!-- 上传提示 --><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-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body><img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" /></el-dialog></div>
</template><script>
import { getToken } from "@/utils/auth";
//接口api
import { serviceApi} from "@/utils/serviceApi";
export default {props: {value: [String, Object, Array],// 图片数量限制limit: {type: Number,default: 6,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ["png", "jpg", "jpeg"],},// 是否显示提示isShowTip: {type: Boolean,default: true}},data () {return {number: 0,uploadList: [],dialogImageUrl: "",dialogVisible: false,hideUpload: false,baseUrl: serviceApi(),uploadImgUrl: serviceApi() + "/PicturesUpload", // 上传的图片服务器地址headers: {Authorization: "Bearer " + getToken(),},fileList: []};},watch: {value: {handler (val) {if (val) {// 首先将值转为数组const list = Array.isArray(val) ? val : this.value.split(',');// 然后将数组转为对象数组this.fileList = list.map(item => {if (typeof item === "string") {if (item.indexOf(this.baseUrl) === -1) {item = { name: this.baseUrl + item, url: this.baseUrl + item };} else {item = { name: item, url: item };}}return item;});} else {this.fileList = [];return [];}},deep: true,immediate: true}},computed: {// 是否显示提示showTip () {return this.isShowTip && (this.fileType || this.fileSize);},},methods: {// 上传前loading加载handleBeforeUpload (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++;},// 文件个数超出handleExceed () {this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);},// 上传成功回调handleUploadSuccess (res, file) {console.log(res, 'res');if (res.code === 200) {this.uploadList.push({ name: res.fileName, url: res.imgUrl });this.uploadedSuccessfully();} else {this.number--;this.$modal.closeLoading();this.$modal.msgError(res.msg);this.$refs.imageUpload.handleRemove(file);this.uploadedSuccessfully();}},// 删除图片handleDelete (file) {const findex = this.fileList.map(f => f.name).indexOf(file.name);if (findex > -1) {this.fileList.splice(findex, 1);this.$emit("input", this.listToString(this.fileList));}},// 上传失败handleUploadError () {this.$modal.msgError("上传图片失败，请重试");this.$modal.closeLoading();},// 上传结束处理uploadedSuccessfully () {if (this.number > 0 && this.uploadList.length === this.number) {this.fileList = this.fileList.concat(this.uploadList);this.uploadList = [];this.number = 0;this.$emit("input", this.listToString(this.fileList));this.$modal.closeLoading();}},// 预览handlePictureCardPreview (file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},// 对象转成指定字符串分隔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) : '';}}
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {display: none;
}// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {transition: all 0s;
}::v-deep .el-list-enter,
.el-list-leave-active {opacity: 0;transform: translateY(0);
}
</style>

//详情展示图片组件 定义文件 ImagePreview
<template><div><el-image v-for="(item, index) in realSrc" :key="index" :src="`${baseUrl}` + item" fit="cover":style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList"><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image></div>
</template><script>
import { isExternal } from "@/utils/validate";
import { serviceApi} from "@/utils/serviceApi";
export default {name: "ImagePreview",data () {return {baseUrl: serviceApi(),}},props: {src: {type: String,default: ""},width: {type: [Number, String],default: ""},height: {type: [Number, String],default: ""}},computed: {realSrc () {if (!this.src) {return;}let real_src = this.src.split(",");if (isExternal(real_src)) {return real_src;}return real_src;},realSrcList () {if (!this.src) {return;}let real_src_list = this.src.split(",");let srcList = [];real_src_list.forEach(item => {if (isExternal(item)) {return srcList.push(item);}return srcList.push(this.baseUrl + item);});return srcList;},realWidth () {return typeof this.width == "string" ? this.width : `${this.width}px`;},realHeight () {return typeof this.height == "string" ? this.height : `${this.height}px`;}},
};
</script><style lang="scss" scoped>
.el-image {border-radius: 5px;background-color: #ebeef5;box-shadow: 0 0 5px 1px #ccc;margin-left: 15px;margin-top: 6px;::v-deep .el-image__inner {transition: all 0.3s;cursor: pointer;&:hover {transform: scale(1.2);}}::v-deep .image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: #909399;font-size: 30px;}
}
</style>

//页面调用
<template>
<div class="file-mar">附件:</div>
//上传图片组件<imageUpload v-model="value" />//详情展示图片组件<imagePreview :src="detailImg" :width="120" :height="120" v-if="actionType == 'detail' || actionType == 'check'"></imagePreview>
</template>
//上传图片组件
import ImageUpload from "@/components/ImageUpload";
详情图片展示组件
import ImagePreview from "@/components/ImagePreview";
//组件注册
components: {ImageUpload,ImagePreview
},//定义接受字段value: '', //上传图片会以逗号拼接上传后台detailImg:'' //详情展示图片