图片文件上传那点事

文件对象转base64

<input type="file" onchange="change(event)"> 
  <script>
      //转化为base64 字符串
      function file2DataUrl(file, callback) {
      var reader = new FileReader();
      reader.onload = function () {
          callback(reader.result);
      };
      reader.readAsDataURL(file);
      }
      function change(e){
          file2DataUrl(e.target.files[0],function(data){
              console.log(data);
          })
      }
  </script>

图片预览

   <div class='image'>
       <!-- <img src=""> -->
   </div>
   <script>
       let img = document.querySelector(".image")
       //转化为base64 字符串
       function file2DataUrl(file, callback) {
           var reader = new FileReader();
           reader.onload = function () {
               callback(reader.result);
           };
           reader.readAsDataURL(file);
       }
       function change(e) {
           console.log(e.target.files)
           // file2DataUrl(e.target.files[0],function(data){
           //     console.log(data);
           // })
           file2Image(e.target.files[0], function (src) {
               console.log(src)
               debugger
               img.appendChild(src)
           })
       }



       function file2Image(file, callback) {//第一个参数支持blob对象 即blob转 image
           var image = new Image();
           var URL = window.webkitURL || window.URL;
           if (URL ) {
               var url = URL.createObjectURL(file);
               image.onload = function () {
                   callback(image);
                   //   window.revokeObjectURL(url);//释放内存
                   URL.revokeObjectURL(url);
               };
               image.src = url;
           } else {
               file2DataUrl(file, function (dataUrl) {
                   image.onload = function () {
                       callback(image);
                   }
                   image.src = dataUrl;
               });
           }
       }
   </script>

注意：要创建对象 URL，可以使用 window.URL.createObjectURL() 方法，并传入 File 或 Blob 对象。如果不再需要相应数据，最好释放它占用的内容。但只要有代码在引用对象 URL，内存就不会释放。要手工释放内存，可以把对象 URL 传给 window.revokeObjectURL()

通过图片链接（url）获取图片 Image 对象

function url2Image(url, callback) {
  var image = new Image();
  image.src = url;
  image.onload = function() {
    callback(image);
  }
}

将 data URL 字符串转化为 Blob 对象。

主要思路是：先将 data URL 数据（data） 部分提取出来，用 atob 对经过 base64 编码的字符串进行解码，再转化成 Unicode 编码，存储在Uint8Array（8位无符号整型数组，每个元素是一个字节） 类型数组，最终转化成 Blob 对象。

function dataUrl2Blob(dataUrl, type) {
  var data = dataUrl.split(',')[1];
  var mimePattern = /^data:(.*?)(;base64)?,/;
  var mime = dataUrl.match(mimePattern)[1];
  var binStr = atob(data);
  var arr = new Uint8Array(len);

  for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
  return new Blob([arr], {type: type || mime});
}