van-uploader上传图片,使用base64回显无法预览的问题

1.今天在开发过程中,遇到了使用vant上传组件,回显无法预览的问题,在搜索后,解决方法如下:

  • html:
 <van-uploader v-model="fileList"
               accept='.jpg,.jpeg,.png'
               :before-read="beforeRead"
               :after-read="afterRead"
               :max-size="10000 * 1024"
               @oversize="onOversize"
               :before-delete="beforeDel" />
  • js
        fileNameList.split(',').forEach(v => {// 遍历后端返回的文件名
          this.$http.secondParty.getImageByName({ fileName: v }).then(k => {
          // 文件名请求到base64格式文件
            // 图片base64转url
            let img = 'data:image/jpeg;base64,' + k.data
            let imgurl = this.base64ImgtoFile(img)
            console.log('imgurl===', imgurl)
            let url =
              window.webkitURL.createObjectURL(imgurl) ||
              window.URL.createObjectURL(imgurl)
            // 创建图片地址
            this.fileList.push({
              content: 'data:image/jpeg;base64,' + k.data,
              File: imgurl,
              name: v,
              status: 'done',
              message: '上传中',
              isImage: true,
              url
            })
          })
        })
  • base64转文件
  base64ImgtoFile(dataurl, filename = 'file') {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },
  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值