vant小程序上传展示图片

wxml

  <van-uploader  file-list="{{ imgList }}" 
    mutiple 
    max-size="1048576"
    upload-text=""
    accept="image"
    extension="['png','jpg','jpeg']"
    max-count="9"
    bind:after-read="afterRead" bind:delete="deleteImg" />
    <view>图片格式png、jpg、jpeg，容量小于1m，建议尺寸：800宽*500高</view>

js

//data定义    imgList: [],
//删除
 deleteImg(index) {
      this.data.imgList.splice(index, 1)
      this.setData({
        imgList: this.data.imgList
      })
    },
//上传
    afterRead(event) {
      const { file } = event.detail;
      let that = this
//上传到服务器，获取到地址和图片文件
      wx.uploadFile({
        url: '服务器地址/upload', // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: 'file',
        formData: { user: 'test' },
        success(res) {
          // 上传完成需要更新 fileList
          let value = JSON.parse(res.data)
          const { imgList = [] } = that.data;
          imgList.push({ ...file, url: value.path, deletable: true, });
          that.setData({ imgList });
        },
      });
//不上传只展示

      //     let obj = {
      //       url: file.url,
      //       name: '图片2',
      //       isImage: true,
      //       deletable: true,
      //     }

      //     this.data.imgList.push(obj)
      //     this.setData({
      //  imgList: this.data.imgList
      //     })


    },
  },

官网传文件方法