本地图片上传前预览(转64位),64位图片转成二进制流

最新推荐文章于 2024-02-07 17:43:35 发布

女青年大新

最新推荐文章于 2024-02-07 17:43:35 发布

阅读量703

点赞数

分类专栏： tips 文章标签： vue.js

本文链接：https://blog.csdn.net/dghgjuyhuoyho/article/details/122873847

版权

tips 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了一种本地图片上传前的预览方法，通过JavaScript实现图片的Base64编码预览。同时，详细讲解了如何将Base64编码转换为二进制流，以便进行图片上传操作。在上传过程中，使用FormData对象将二进制流附加到请求中，确保了文件上传的正确性。

摘要由CSDN通过智能技术生成

本地图片上传前预览(转64位)

html部分
   <!-- 预览的图  -->
        <img :src="preview" class="preview" crossorigin="anonymous" v-if="preview" alt="" />
        <input
                @change="imageUploadClick"
                type="file"
                apture="camera"
                accept="image/jpeg,image/jpg,image/png"
              />
js部分
    imageUploadClick(ev) {
      let file = ev.target.files[0]
      this.file = ev.target.files[0]
      if (
        file.type === 'image/png' ||
        file.type === 'image/gif' ||
        file.type === 'image/jpg' ||
        file.type === 'image/jpeg'
      ) {
       this.readImg(ev) //预览图片
      } else {
        this.$alertMsg('仅支持png,jpg,jpeg格式图片文件上传')
      }
    },
  readImg(event) {
    let file = event.target.files[0]
   this.uploadName = file.name
    let reader = new FileReader()
     // 转base64
   reader.onload = e => {
//
    this.preview = e.target.result
     }
     reader.readAsDataURL(file)
    },

64位图片转成二进制流

   //baseurl就是图片地址 最后返回的是数据流
dataURLtoBlob(baseurl) {
      let arr = baseurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    }
将转成二进制流的图片上传 例如:
 let formData = new FormData()
      formData.append('file', this.dataURLtoBlob(图片地址))
//getUploading发送上传请求
      let img = await getUploading(formData)