vue项目vant图片上传总结

页面

    <!-- 上传照片 -->
    <van-field name="uploader">
      <template #input>
        <van-uploader
          ref="uploadImg"
          v-model="images"
          :before-delete="beforeDel"
          :before-read="beforeRead"
          :after-read="afterRead"
          multiple
          :preview-full-image="false"
          @click-preview="clickPreview"
          preview-cover="加载中..."
          accept="image/jpg,image/jpeg"
          :max-size="5 * 1024 * 1024">
          </van-uploader>
      </template>
    </van-field>
    <!-- 加载提示 -->
    <van-overlay :show="showPopup">
      <div class="wrapper" @click.stop style="margin-top: 200px;">
        <van-loading size="80px" color="#ffffff" vertical >加载中...</van-loading>
      </div>
    </van-overlay>
    <!-- 原图预览 -->
    <van-image-preview v-model="show" :images="previewOptions.images" :closeable="true" :show-index="false">
    </van-image-preview>

图片显示不正常

每个图片对象加上 isImage: true

// 向后台获取图片列表数据
getImg(upData).then(response => {
   
          this.images.push({
   
            url: 'data:image/jpeg;base64,' + response.data,
            isImage: true
          })
        }).catch(err => {
   
          console.log(err)
        })

图片上传前校验及上传调用接口

    <!-- 上传照片 -->
    <van-field name="uploader">
      <template #input>
        <van-uploader
          v-model="images"
          @oversize="onOversize"
          :before-read="beforeRead"
          :after-read="afterRead"
          </van-uploader>
      </template>
    </van-field>
    
    methods: