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

作者：我家小花儿 | 2024-06-06 12:55:51

踩

js base64格式图片预览

文章目录

1、前言

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

这个时候就有两种方案了

方式一转base64预览
方式二生成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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

4、参考链接

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/681018

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

文章目录

1、前言

1、FileReader

3、window.URL.createObjectURL

4、参考链接

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