XiangJv

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

本站有上传图片压缩成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'});