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:{
    //图片上传前校验格式大小问题
    beforeRead (file) {
    // 多张图片
      if (file instanceof Array) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].type !== 'image/jpeg' && file[i].type !== 'image/jpg') {
            this.$toast.fail('请上传 jpg、jpeg 格式图片')
            return false
          }
          return true
        }
      } else {
       // 单张图片
        if (file.type !== 'image/jpeg' && file.type !== 'image/jpg') {
          this.$toast.fail('请上传 jpg、jpeg 格式图片')
          return false
        }
        return true
      }
    },
    afterRead (file) {
    // 此时可以自行将文件上传至服务器
      if (file instanceof Array) {
        file.map((v) => {
          v.status = 'uploading'
          v.message = '上传中...'
          this.uploadImg(v)
        })
      } else {
        file.status = 'uploading'
        file.message = '上传中...'
        this.uploadImg(file)
      }
    },
    // 上传
    uploadImg (file) {
      const param = new FormData()
      param.append('file', file.file)
      // 额外需要添加的参数，可以添加到param中
      const that = this
      upload(param).then((res) => {
        if (res.status === '1') {
          if (file instanceof Array) {
            // 判断是否是数组
            file.map((v, i) => {
              v.status = 'success'
              v.message = ''
            })
          } else {
            file.status = 'success'
            file.message = ''
          }
        } else {
          file.status = 'failed'
          file.message = '上传失败'
          that.$toast(res.data.errMsg)
        }
      }).catch((err) => {
        console.log(err)
        this.$toast('上传失败!')
      })
    }
}

图片删除调用接口

    async beforeDel (elIndex) {
      const isDel = await Dialog.confirm({
        message: '确定删除吗？'
      })
      if (isDel === 'confirm') {
          const vm = this
          // 请求后台接口进行删除，根据后台返回的不同状态进行处理
          // 删除成功后
          this.$toast.success('删除成功！')
          // 将预览图片清空，不然容易导致删除后，预览原图不对应问题
          this.clickedImages = new Array(this.photos.length)
          this.previewOptions.images = []
          // name.index代表图片的索引
          return (file, name) => {
            const fileIndex = name.index
            // console.log(fileIndex)
            vm.fileList[elIndex].splice(fileIndex, 1)
            vm.fileListIs[elIndex].splice(fileIndex, 1)
          }
      }
    },

点击缩略图预览原图问题

首先上传组件加上这两个
:preview-full-image=“false”
@click-preview=“clickPreview”

    async clickPreview (file, name) {
      // 如果原图预览列表中不存在这张缩略图对应的索引，请求后台获取原图
      if (!this.previewOptions.images[name.index]) {
        this.showPopup = true
        const upData = {}
        getImg(upData).then(response => {
          this.previewOptions.images[name.index] = `data:image/jpeg;base64,${response.data}`
          this.showPopup = false
          this.show = true
          this.index = name.index
        }).catch(err => {
          this.showPopup = false
          this.show = false
          console.log(err)
        })
      } else {
        this.show = true
        this.index = name.index
      }
    },