elementui上传图片 回显
<el-upload
class="avatar-uploader"
ref="otherLicense"
action
:auto-upload="false"
:on-preview="handlePicPreview"
:on-remove="handleRemove"
:file-list="form.fileList"
:limit="imgLimit"
:on-change="otherSectionFile"
list-type="picture-card"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- 上传图片放大 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
data中
// 业务结束证明材料
let validateImage = (rule, value, callback) => {
// console.log(this.AddDateModel.fileId);
//验证器
if (this.AddDateModel.fileId.length <= 0) {
//为true代表图片在 false报错
callback(new Error("请上传业务结束证明材料"));
} else {
callback();
}
};
AddDateModel: {
fileId:[]
},
// 回显图片的路径
photoList: [{ url: "" }],
// 放大图片的路径
dialogImageUrl: "",
// 上传图片放大弹出框
dialogVisible: false,
imgLimit: 9, //最多可上传几张图片
AddDateRules: {
fileId: [
{ required: true, validator: validateImage, trigger: "blur" },
],
},
methods中
handlePicPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 业务申请材料
handleRemove(file, fileList) {
this.AddDateModel.fileId.map((item, index) => {
if (item.uid == file.uid) {
this.AddDateModel.fileId.splice(index, 1);
}
});
},
otherSectionFile(file) {
const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isJPG) {
this.$message.error("只能是图片!");
this.$refs.upload.clearFiles();
this.otherFiles = null;
return;
}
if (!isLt20M) {
this.$message.error("上传图片大小不能超过 20MB!");
this.$refs.upload.clearFiles();
this.otherFiles = null;
return;
}
this.otherFiles = file.raw;
// FormData 对象
var formData = new FormData();
// 文件对象
formData.append("file", this.otherFiles);
formData.append("filePath", "yuanchengyiliao");
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
methods: "post",
};
// 调取接口 上传参数
this.$axios.hosUpload(formData, config).then((res) => {
// console.log(file)
let result = res.data.data;
let arr = [];
for (let i = 0; i < result.length; i++) {
// console.log(result[i])
arr.push(result[i].pictureId);
}
file.pictureId = arr.join("||");
this.AddDateModel.fileId.push(file);
// console.log(this.AddDateModel.fileId);
});
},
显示数据的方法中
async bussEdit(row) {
//调取接口然后把数据传到photoList中,我只上传一张图片,就直接写,上传多张的,循环就好了。
this.photoList[0].url = 图片路径;
},
// 回显
fileCoList: [], //图片回显
if (row.fileId) {
// console.log(row.fileId)
let imgss = [];
let imgLen = row.fileId.split(",");
for (let i = 0; i < imgLen.length; i++) {
imgss.push(imgLen[i]);
}
// console.log(imgss.join(','))
this.$nextTick(() => {
this.$refs.addinmanfill.getFile(imgss.join(","));
});
} else {
this.$nextTick(() => {
this.$refs.addinmanfill.getFile('');
});
}
watch: {
fileCoList: {
deep: true,
handler() {
if (this.fileCoList) {
this.AddDateModel.fileId = this.fileCoList;
}
},
},
},
async getFile(ids) {
let idsdata = _qs.stringify({
ids: ids,
});
let res = await this.$axios.sysgetFile(idsdata);
// console.log(res.data.data);
let result = res.data.data;
result.map((item) => {
// console.log(item)
item.url = this.GLOBAL.BASE_URL + item.url;
item.pictureId = item.id;
});
// console.log(result)
this.fileCoList = result;
},