本地image文件转换为base64

字数 138阅读 92

一、背景需求

1、本地图片预览
2、上传某些特殊的图片,后端不存文件,存字符串

二、利用FileReader对象的readAsDataURL()

readAsDataURL 方法会读取指定的 BlobFile 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。

三、本地image文件预览实例

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // 确保 `file.name` 符合我们要求的扩展名
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}

参考文献 MDN-FileReader

推荐阅读更多精彩内容