From 829f5116884f98643ffc5b2a548a600d40c0cedb Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 14 四月 2025 23:09:32 +0800
Subject: [PATCH] 处理图片显示问题
---
src/components/myUpload/index.vue | 54 +++++++++++++++++++-----------------------------------
1 files changed, 19 insertions(+), 35 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index 4735265..4f72a5c 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -1,41 +1,20 @@
<template>
<div class="my-upload">
<div v-if="pictureList.length > 0" class="image-box">
- <div
- v-for="image in pictureList"
- :class="{
- 'image-box-item': true,
- 'image-box-item-cover': isShowUpload
- }"
- >
- <span
- v-if="isShowUpload"
- @click="handleDeletePicture(image)"
- class="image-delete-icon el-icon-delete"
- ></span>
- <el-image
- :key="image"
- class="image-content"
- :src="image"
- :preview-src-list="[image]"
- ></el-image>
+ <div v-for="image in pictureList" :class="{
+ 'image-box-item': true,
+ 'image-box-item-cover': isShowUpload
+ }">
+ <span v-if="isShowUpload" @click="handleDeletePicture(image)"
+ class="image-delete-icon el-icon-delete"></span>
+ <el-image :key="image" class="image-content" :src="setPicUrl(image)"
+ :preview-src-list="[image]"></el-image>
</div>
</div>
- <el-upload
- v-if="isShowUpload && pictureList.length < limit"
- :file-list="fileList"
- v-loading="loading"
- element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(0, 0, 0, 0.8)"
- action=""
- :multiple="multiple"
- :show-file-list="flag"
- :limit="limit"
- :list-type="listType"
- :auto-upload="true"
- :http-request="handleUpload"
- style="margin-left: 14px"
- >
+ <el-upload v-if="isShowUpload && pictureList.length < limit" :file-list="fileList" v-loading="loading"
+ element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" action=""
+ :multiple="multiple" :show-file-list="flag" :limit="limit" :list-type="listType" :auto-upload="true"
+ :http-request="handleUpload" style="margin-left: 14px">
<div class="upload-btn">
<i class="el-icon-plus"></i>
<span>涓婁紶鍥剧墖</span>
@@ -45,6 +24,7 @@
</template>
<script>
import imageManagement from "@/api/operate/imageManagement";
+import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
data() {
@@ -95,8 +75,6 @@
formData.append('file', file);
imageManagement.importImage(formData)
.then((url) => {
- // .then(({ url1, url2, url3, url4 }) => {
- // const url = url1 ?? url2 ?? url3 ?? url4;
this.$emit('setPictureUrl', { url: url });
this.loading = false;
})
@@ -109,6 +87,10 @@
handleDeletePicture(imageUrl) {
this.$emit("delPictureUrl", { url: imageUrl });
},
+ setPicUrl(item) {
+ item = item.replace("[", "").replace("]", "");
+ return FILE_ORIGINAL_PATH + item;
+ }
},
props: {
pictureList: {
@@ -151,6 +133,7 @@
line-height: 22px;
}
}
+
.image-box {
display: flex;
flex-wrap: wrap;
@@ -193,6 +176,7 @@
width: 100px;
height: 100px;
}
+
:deep(.el-upload-list__item) {
width: 100px;
height: 100px;
--
Gitblit v1.8.0