element-ui upload 照片墙 照片回显

转载自https://blog.csdn.net/jiangjiang_ing/article/details/88977725

<el-form-item label="海报" prop="invitationPosterUrl">
<el-upload
:file-list="fileList"   //这里要设置！！！
action="/admin/upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
<img width="100%" :src="dialogImageUrl" alt>
</el-dialog>
</el-form-item>

data() {
return {
fileList: [],
items: [],
urlObj: {},
dialogImageUrl: "",
invitationFirst: "",
urlArr: [],
}
}

methods: {
getList() {//这个函数可以不用看 这是获取后台完整的数据
this.listLoading = true;
this.listQuery.isAsc = false;
fetchList(this.listQuery).then(response => {
this.list = response.data.records;
this.list.map(val => {
//仅展示第一张海报 后台传回以；分割图片网址的字符串，这里开始分割
if (val.invitationPosterUrl != null) {
const invitationurlArr = val.invitationPosterUrl.split(";");
this.urlArr = invitationurlArr;
const invitationurl = invitationurlArr[0];
val.invitationFirst = invitationurl;
}
});
this.total = response.data.total;
this.listLoading = false;
});
},
//编辑
handleUpdate(row) {
this.fileList = [];
this.urlArr = [];
getObj(row.id).then(response => {
this.form = response.data.data;
if (
this.form.invitationPosterUrl != "" &&
this.form.invitationPosterUrl != null
) {
//分割网址插入this.fileList图片就可以展示出来了
this.items = this.form.invitationPosterUrl.split(";");
this.items.forEach(val => {
this.urlObj.url = val;
this.urlArr.push(val)
this.fileList.push(this.urlObj);
this.urlObj = {};
});
}
this.dialogFormVisible = true;
this.dialogStatus = "update";
});
},
update(formName) {
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
this.dialogFormVisible = false;
this.form.password = undefined;
putObj(this.form).then(() => {
this.dialogFormVisible = false;
this.getList();
this.$notify({
title: "成功",
message: "修改成功",
type: "success",
duration: 2000
});
});
} else {
return false;
}
});
},
handleSuccess(jsonData, field) {//上传图片成功传给后台的数据
this.urlArr.push(jsonData.filename);
this.urlString = this.urlArr.join(";");
this.form.invitationPosterUrl = this.urlString;
},
handleRemove(file, fileList) {//移除图片传给后台的数据
this.urlArr = [];
if (fileList.length == 0) {
this.form.invitationPosterUrl = null;
} else {
fileList.forEach(item => {
this.urlArr.push(item.url);
this.urlString = this.urlArr.join(";");
this.form.invitationPosterUrl = this.urlString;
});
}
},
handlePictureCardPreview(file) {//点击放大图片
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}