el-upload上传图片与接收数据后图片的回显

<template>
    <div>
    <el-card>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
        @submit.native.prevent>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="受伤部位图片">
                    <el-upload :action="uploadUrl" :limit="5" list-type="picture-card"
 :file-list="fileList" :on-success="handleHeadSuccess" :before-upload="beforeFileUpload"
 :disabled="type==='查看检伤'" :on-remove="handleRemove" ref="headUpload"
 :on-preview="handlePictureCardPreview">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisibleimg" :append-to-body="true">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    </el-card>
    </div>
</template>
<script>
export default {
    name: "prescription",
        data() {
            reurn{
              uploadUrl: window.SITE_CONFIG['fileUploadURL'] + '/singleUpload',
              fileList: [],              
          }
        },
    method:{
setForm(form) {
    this.ruleForm = {
        ...form
    }
    this.unitOption = this.toPackageOptions(this.ruleForm.packing);

    let packing = form.packing.split(';')
    this.ruleForm.packing = packing.map(v => {
        let item = v.replace(/\//g, ' ').split(' ')
        return {
            count: item[0],
            unit: item[1],
            package: item[2]
        }
    })
    if (this.action != 'add') {
        this.unitOption.forEach(item => {
            this.changePack(item.dictLabel)
        })
    }
    this.ruleForm.useMode = form.useMode.split(',')
    let relativeUrl = form.imageUrlAll.split(',')
    this.fileList = [{

        "url": ""
    },
    {
        "url": ""
    },
    {
        "url": ""
    }, {
        "url": ""
    },
    {
        "url": ""
    }
    ]
    if (relativeUrl && relativeUrl[0] != '') {
        for (let i = 0; i < relativeUrl.length; i++) {
            this.fileList[i].url = window.SITE_CONFIG['fileDownURL'] + relativeUrl[i];
            this.fileList[i].relativeUrl = relativeUrl[i]
        }
    }
    let length = 3
    let relativeLength = 0
    if (relativeUrl && relativeUrl[0] != '') {
        relativeLength = relativeUrl.length
    }
    while (true) {
        if (relativeLength == length) {
            break
        }
        this.fileList.pop()
        length--;
    }
},
handleHeadSuccess(response, file, fileList) {
    //图片上传成功的钩子，上传成功就赋值
    this.$message({
        type: "success",
        message: "上传成功!",
    });
    if (this.ruleForm.imageUrlAll) {
        this.ruleForm.imageUrlAll = this.ruleForm.imageUrlAll + ',' + response.data.url;
    } else {
        this.ruleForm.imageUrlAll = response.data.url;
    }
},
beforeFileUpload(file) {
    const isJPG = file.type === "image/jpeg";
    const isPng = file.type === "image/png";
    const isBmp = file.type === "image/bmp";
    const isLt2M = file.size / 1024 / 1024 < 4;
    if (!isJPG && !isPng && !isBmp) {
        this.$message.error("图片格式不正确");
        return false;
    }
    if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 4MB!");
        return false;
    }
    return true;
},

handleRemove(file, fileList) {
    console.log(file, fileList)
    this.fileList = fileList;
    if (file.response) {
        this.ruleForm.imageUrlAll = this.ruleForm.imageUrlAll.replace(file.response.data.relativeUrl, '')

    } else {
        this.ruleForm.imageUrlAll = this.ruleForm.imageUrlAll.replace(file.relativeUrl, '')

    }
    this.ruleForm.imageUrlAll = this.ruleForm.imageUrlAll.replace(',,', ',')
    if (this.ruleForm.imageUrlAll.indexOf(',') == 0) {
        this.ruleForm.imageUrlAll = this.ruleForm.imageUrlAll.substring(1,)
    }
    if (this.ruleForm.imageUrlAll.lastIndexOf(',') == this.ruleForm.imageUrlAll.length - 1) {
        this.ruleForm.imageUrlAll = this.ruleForm.imageUrlAll.substring(0, this.ruleForm.imageUrlAll.length - 1)
    }

},
handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisibleimg = true;
},
examinationInit(id) {
    this.dialogVisible = true;
    this.ruleForm = {}
    this.injuredArea = []
    this.cleaningPart = []//清洗部位
    this.breatheRateNum = "";
    this.systolicBloodPressureNum = "";
    this.languageResponseNum = "";
    this.actionResponseNum = "";
    this.eyeOpeningNum = "";
    this.imageUrlAll = '';
    this.$forceUpdate();
    getList({ status: 1 }).then(res => {
        if (res.data.data) {
            this.taskList = res.data.data
            if (this.taskList.length == 1) {
                this.ruleForm.taskId = this.taskList[0].id
            }
        }
    })
    if (id) {//查看
        triageEdit(id).then(res => {
            this.ruleForm = res.data.data[0]
            this.injuredArea = res.data.data[0].injuredArea.split(',')
            this.cleaningPart = res.data.data[0].cleaningPart.split(',')
            this.medicalAdviceInfoList = res.data.data[0].medicalAdviceInfoList

            if (res.data.data[0].imageUrlAll) {//图片的回显
                let imgArr = res.data.data[0].imageUrlAll.split(',')
                imgArr.forEach(item => {
                    let obj = new Object();
                    obj.url = item;
                    this.fileList.push(obj)
                })
            }
        })
    }
  },
 }
}
</script>

https://www.cnblogs.com/lidonglin/p/11577602.html 案例