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 });    //回显图片的关键

        });

      }

    }