文件转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file">
<img src="" alt="">
<script>
  document.getElementsByTagName('input')[0].onchange = function (event) {
    let reader = new FileReader();
    // file转base64
    reader.readAsDataURL(event.target.files[0]);
    // file转buffer文件, 注意如果要转换blob文件的话最好先转换为buffer再转换为blob
    // reader.readAsArrayBuffer(e.dataTransfer.files[0]);
    reader.onload = function (base) {
      // base64字符串编码
      console.log('base64:::', base.target.result);
      // base64转file
      console.log('file', dataURLtoFile(base.target.result, event.target.files[0].name))
      // base64转blob
      const blob = dataURLtoBlob(base.target.result);
      console.log('blob', blob);
      // blob本地使用路径
      const blobUrl = URL.createObjectURL(blob);
      console.log('blob', blobUrl);
      document.getElementsByTagName('img')[0].src = blobUrl;
      // blob转file
      const files = new window.File(
              [blob],
              '图片',
              { type: event.target.files[0].type }
      );
      console.log('file', files);
    }
  }
  // base转blob
  function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(',');
    //注意base64的最后面中括号和引号是不转译的
    var _arr = arr[1].substring(0,arr[1].length-2);
    var mime = arr[0].match(/:(.*?);/)[1],
            bstr =atob(_arr),
            n = bstr.length,
            u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
      type: mime
    });
  }
  //将base64转换为文件
  function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.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 File([u8arr], filename, {
      type: mime
    });
  }
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容