处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue

@@ -5,7 +5,8 @@
            <el-form ref="arriveForm" label-width="160px" :model="arrive" :rules="arriveRules" autoComplete="on">
                <!-- 到达时间 -->
                <el-form-item label="到达时间:" prop="arrivalTime">
                    <el-date-picker v-model="arrive.arrivalTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择到达时间">
                    <el-date-picker v-model="arrive.arrivalTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                        placeholder="选择到达时间">
                    </el-date-picker>
                </el-form-item>
                <!-- 到达地址 -->
@@ -24,9 +25,12 @@
                </el-form-item>
                <!-- 现场情况照片 -->
                <el-form-item label="现场情况照片:" prop="situationPic">
                    <div class="upImg" >
                            <MyUpload :picture-list="arrive.situationPic" @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
                        <div class="tip">{{ arrive.situationPic.length }} / 4</div>
                    <div class="upImg">
                        <MyUpload :picture-list="arrive.situationPic" @setPictureUrl="setPicUrl"
                            @delPictureUrl="delPicUrl"></MyUpload>
                        <div class="tip">
                            {{ arrive.situationPic.length }} / 4
                        </div>
                    </div>
                </el-form-item>
            </el-form>
@@ -36,16 +40,17 @@
<script>
import MyUpload from "@/components/myUpload"
import { deepClone } from "@/utils/helper";
import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
    components: {
        MyUpload
    },
  props: {
    arriveData: {
      type: Object,
      default: () => null
    }
  },
    props: {
        arriveData: {
            type: Object,
            default: () => null
        }
    },
    data() {
        const checkTime = (rule, value, callback) => {
            if (value) {
@@ -96,15 +101,19 @@
            fileList: [],
        }
    },
  created() {
      if (this.arriveData) {
        this.arrive = deepClone(this.arriveData);
        this.arrive.situationPic = this.arriveData.situationPic.split(',');
      }
  },
  methods: {
    created() {
        if (this.arriveData) {
            this.arrive = deepClone(this.arriveData);
            this.arrive.situationPic = this.arriveData.situationPic.split(',');
            this.arrive.situationPic.forEach(item => {
                item = FILE_ORIGINAL_PATH + item
            });

        }
    },
    methods: {
        handleSuccess(res, file, filelist) {
            const baseUrl = 'http://140.143.152.226:8410/';
            const baseUrl = '';
            if (this.arrive.situationPic.length < 4) {
                this.arrive.situationPic.push(baseUrl + res.data.url1)
            }
@@ -127,15 +136,15 @@
        },
        // 设置上传成功之后的图片地址
        setPicUrl({ url }) {
            const baseUrl = 'http://140.143.152.226:8410/';
            const baseUrl = '';
            if (this.arrive.situationPic.length < 4) {
                this.arrive.situationPic.push(baseUrl + url)
                this.arrive.situationPic.push(url)
            }
        },
        //删除图片
        delPicUrl({url}){
            const baseUrl = 'http://140.143.152.226:8410/';
            this.arrive.situationPic.splice(this.arrive.situationPic.indexOf(baseUrl + url),1);
        delPicUrl({ url }) {
            const baseUrl = '';
            this.arrive.situationPic.splice(this.arrive.situationPic.indexOf(baseUrl + url), 1);
        }
    }
}
@@ -153,6 +162,7 @@

.upImg {
    display: flex;
    overflow: auto;

    .tip {
        position: absolute;
@@ -207,5 +217,4 @@

// ::v-deep .el-form-item__label {
//     color: #4b9bb7;
// }
</style>
// }</style>