vue+vant webApp图片上传和编辑时图片回显

Posted 2022-11-14 wangmj518

        

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

        );