<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 案例