处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

 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;