vue+vant webApp图片上传和编辑时图片回显
Posted wangmj518
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+vant webApp图片上传和编辑时图片回显相关的知识,希望对你有一定的参考价值。
upload-text="选取图片"
v-model="imageList" //图片上传成功后,afterRead方法回调,会把图片信息赋值给imageList
:after-read="afterRead" //回调函数
:max-count="9" //最大上传数量
multiple //是否开启图片多选,部分安卓机型不支持
/>
import
CellGroup,
Cell,
Uploader
from "vant";
components:
[CellGroup.name]: CellGroup,
[Cell.name]: Cell,
[Uploader.name]: Uploader
,
data()
return
show:
classCode: "",
userName: "",
honorsName: "",
issuingUnit: "",
obtainDate: "",
explainMes: "",
photoList: []
,
imageList: [] //图片数组
tempImageList:[] //保存原先的图片
;
,
//图片上传
async afterRead(file, detail)
let files = [];
if (Array.isArray(file))
files = file;
else
files = [file];
for (let index = 0; index < files.length; index++)
const element = files[index];
//图片压缩
let obj = await this.common.imgPreview(element.file);
element.status = "uploading";
element.message = "上传中...";
//图片上传接口
let data = await uploadFile(obj.file);
if (data.code == "success")
element.status = "success";
element.fileUrl = data.data[0].filePath;
else
element.message = "上传失败";
element.status = "failed";
----------------------------编辑时图片回显---------------------
//获取数据详情
async initEdit(id)
const res = await getStudentHonors( id ); //获取荣誉详情
if (res.code == "success")
this.show.id = id;
for (let key in this.show)
this.show[key] = res.data[key];
this.studentName = res.data.stuName;
this.className = res.data.className;
//保存原先的图片路径
this.tempImageList = res.data.photoList;
res.data.photoList.map(item =>
Image_Path为图片在服务器中的路径
this.imageList.push( url: Image_Path + item ); //回显图片的关键
);
暑期编程PK赛 得CSDN机械键盘等精美礼品!
以上是关于vue+vant webApp图片上传和编辑时图片回显的主要内容,如果未能解决你的问题,请参考以下文章