图片上传转换成Base64,然后再转成 file 提交给后端

香菊网 发表于: 2019-07-09 分类: H5部分  前端front  HTML&CSS  js部分  软件soft  

有时候我们上传图片的时候图片内存会很大 ,需要我们获取到图片信息 操作后重新提交给后端。

本站有上传图片压缩成Base64的文章  (js 图片上传 压缩、旋转的解决方法) 

这个过程就需要我们把图片转换成Base64在canvas上操作,完成后再转换成 file 形式 发送给后端

图片上传代码转换成Base64

 

<input type="file" name="upimg" id='up'>

<script>
  window.onload = () => {
    let upDOM = document.getElementById('up')
    upDOM.addEventListener('change', (e) => {
      console.log(e)
      console.log(upDOM.files[0])
      var reader = new FileReader();
      reader.readAsDataURL(upDOM.files[0]);
      
      reader.onload = function (ie) {
        var Base64Val = this.result;
        console.log('Base64')

        console.log(Base64Val)
      }
    })
  }
</script>

将Base64格式的图片转换成file提交给后端

 

      // Base64Val  base64格式的图片
      // fileName   生成文件的名字 (可自定义)

      var bytes=window.atob(Base64Val.split(',')[1]);
      var ab = new ArrayBuffer(bytes.length);  
      var ia = new Uint8Array(ab);  
      for (var i = 0; i < bytes.length; i++) {  
          ia[i] = bytes.charCodeAt(i);  
      }
      this[fileName] = new File( [ab] , fileName , {type : 'image/png'})

或者准换成 Blob

 

      new Blob([ab], {type : 'image/png'});
标签: H5部分前端frontHTML&CSSjs部分软件soft
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮