首页 前端知识 【日常记录】【JS】前端预览图片的两种方式,Base64预览和blob预览

【日常记录】【JS】前端预览图片的两种方式,Base64预览和blob预览

2024-07-21 00:07:15 前端知识 前端哥 290 361 我要收藏

文章目录

    • 1、前言
    • 1、FileReader
    • 3、window.URL.createObjectURL
    • 4、参考链接

1、前言

  • 一般来说,都是 后端返回给前端图片的url,前端直接把这个值插入到 img 的src 里面即可
  • 还有一种情况是前端需要预览一下图片,比如:上传头像按钮,前端需要临时 预览一下图片

这个时候就有两种方案了

  1. 方式一 转base64预览
  2. 方式二 生成blob图片预览路径url

1、FileReader

可以利用 FileReader 把文件转成 base64格式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input id="file1" type="file" value="FileReader.readAsDataURL 方式" multiple>

  <script>
    let file1El = document.querySelector('#file1')
    file1El.addEventListener('change', function (e) {
      // 可能会上传多个文件 
      let files = e.target.files
      console.log('files', files);
      if (files.length != 0) {
        loadFiles(files)
          .then((fileContents) => {
            console.log(fileContents); // 在所有文件加载完成后,打印包含所有文件内容的数组

            fileContents.forEach(f => {
              let imgEl = document.createElement('img')
              imgEl.src = f
              imgEl.style.width = '100px'
              imgEl.style.height = '200px'
              document.body.appendChild(imgEl)
            })
          })
          .catch((error) => {
            console.error(error); // 处理错误情况
          });
      }

    })
    function loadFiles(files) {
      const promises = []
      for (const item of files) {
        promises.push(readFile(item))
      }
      return Promise.all(promises);
    }
	// 利用 promise 封装一个生成 base64的 函数,因为 onload 事件不是同步的,它需要事件处理
    function readFile(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          const result = reader.result;
          if (typeof result === 'string') {
            resolve(result);
          } else {
            reject(new Error("Failed to read file"));
          }
        };
        reader.onerror = (event) => {
          reject(event.target.error);
        };
        // 参数file: 从中读取的 Blob 或 File 对象
        reader.readAsDataURL(file);
      });
    }


  </script>

</body>

</html>

3、window.URL.createObjectURL

window.URL.createObjectURL 方法 返回一个 url,可以直接放在 img 的src 属性上,也可以直接放在浏览器打开

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input id="file2" type="file" value="createObjectURL 方式" multiple>

  <script>
    let file2El = document.querySelector('#file2')
    file2El.onchange = function () {
      let files = file2El.files
      for (const item of files) {
      
      	// 接收 File、Blob 或 MediaSource 对象。
        let url = window.URL.createObjectURL(item)
        console.log('url', url);
        let img = document.createElement('img')
        // createObjectURL 返回的格式比如:blob: http://127.0.0.1:5500/3c9e3502-1c0c-4dae-b4dc-26b68f207285
        img.src = url
        document.body.appendChild(img)
      }
    }
  </script>
</body>

</html>

4、参考链接

  • createObjectURL MDN
  • FileReader MDN
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14128.html
标签
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!