js的File对象,Blob和file相互转换

示例

javascript 复制代码
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>js的File对象,Blob和file相互转换</title>
  <style>
    .prview {
      display: flex;
      margin: 10px;
    }

    .prview .rename {
      display: inline-block;
      width: 60px;
    }

    .prview img {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <input type="file" onchange="upload(this)" />

  <div class="prview">
    <span class="rename">base64:</span>
    <img id="base64" src="" alt="" />
  </div>
  <div class="prview">
    <span class="rename">blob:</span>
    <img id="blob" src="" alt="" />
  </div>

  <script>
    const upload = async (e) => {
      let files = e.files[0];
      console.log(files);

      // file转base64
      let base64 = await fileToBase64(files);
      setImage('base64', base64) //设置图片

      // base64转blob
      let blob = parseBlob(base64);
      setImage('blob', blob) //设置图片

      // blob转file
      let file = blobToFile(blob);
      console.log(file);
    };

    // blob转file
    const blobToFile = (blob) => {
      let rename = new Date().getTime() + ".png";
      let file = new File([blob], rename, { type: "image/png" });
      return file;
    };

    // base64转blob
    const parseBlob = (base64) => {
      var arr = base64.split(",");
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      for (var i = 0; i < n; i++) {
        u8arr[i] = bstr.charCodeAt(i);
      }
      var url = URL || webkitURL;
      return url.createObjectURL(new Blob([u8arr], { type: mime }));
    };

    // file转base64
    const fileToBase64 = (file) => {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    };

    // 设置格式到图片
    const setImage = (id, val) => {
      let img = document.getElementById(id)
      img.setAttribute('src', val)
    }
  </script>
</body>

</html>
相关推荐
Senar17 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴35 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言39 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml