buffer和图片的预览上传和base64的转码和解码_图片 buffer

作者：2023面试高手 | 2024-02-26 08:16:53

踩

图片 buffer

1.ArrayBuffer

ArrayBuffer用来表示通用的固定长度的原始二进制数据缓冲区
他是一个字节数组，在别的语音称为byteArray
不可以直接使用，要转化为TypedArray或Dataview对象来操作
通过这些格式来读取内容

2.TypedArray

一个类型化数组（TypedArray）对象描述了一个底层的二进制数据缓冲区
（binary data buffer）的一个类数组视图（view）
它本身不可以被实例化，甚至无法访问，可以理解为接口

3.DataView

DataView 视图是一个可以从二进制ArrayBuffer
对象中读写多种数值类型的底层接口，
使用它时，不用考虑不同平台的字节序问题。

4.Blob

bolb对象表示一个不可变、原始数据的类文件对象。
它的数据可以按文本或二进制的格式进行读取，
也可以转换成 ReadableStream 来用于数据操作。
一种从Blob中读取内容的方法是使用 FileReader
file对象和blob对象，File 接口基于Blob，
file继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

var debug = { hello: "world" };
var blob = new Blob([JSON.stringify(debug, null, 2)],
            { type: 'application/json' });
1
2
3

5.file对象

File 对象是来自用户在一个 <input> 元素上选择文件后返回的 

FileList 对象,也可以是来自由拖放操作生成的 DataTransfer

对象或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
1
2
3
4
5

6. FileReader

文件预览
function previewFile() {
  var preview = document.querySelector('img');
  var file =  document.querySelector
  			('input[type=file]').files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}


 reader.readAsDataURL()
 data:URL格式的Base64字符串以表示所读取文件的内容。
 *注意***不可用于文件上传，应为太大了
 应该把base64转码

 reader.readAsText()
 字符串的文件内容。默认utf-8
```kk

# 7.URL.createObjectURL

```powershell
objectURL = URL.createObjectURL(object);

这个新的URL 对象表示指定的 File 对象或 Blob 对象
你可以像使用普通URL那样使用它，比如用在img.src 上。

URL.revokeObjectURL(objectURL)
让浏览器知道不再保留对文件的引用

不可用于文件上传，应为他只是一个文件的引用
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

8. base64的转码和解码

完整的代码案例

前端代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" id="input" οnchange="handleFiles(this.files)">
  <script>
    const inputElement = document.getElementById("input");
    inputElement.addEventListener("change", handleFiles, false);
    function handleFiles() {
      const fileList = this.files;
       /* now you can work with the file list */
      //new 一个文件阅读对象
      var reader = new FileReader();
      //监听转化成功的回调函数，监听load后的函数
      reader.addEventListener("load", function () {
        //得到字节数组
        let bytes = atob(reader.result.split(',')[1]);
        //获取文件类型
        let mime = reader.result.split(',')[0].match(/:(.*?);/)[1]
        //创建一个长度为n的buffer
        let arrayBuffer = new ArrayBuffer(bytes.length);
        //转化为8个字节的类型数组，描述了一个底层的二进制数据缓冲区
        let uInt8Array = new Uint8Array(arrayBuffer);
        for (let i = 0; i < bytes.length; i++) {
          //填充转化后的阿斯克码
          uInt8Array[i] = bytes.charCodeAt(i);
        }
        //生成一个bolb类型
        let blob = new Blob([uInt8Array], { type: mime })
        let xhr = new XMLHttpRequest;
        //以表单的形式向后端传递
        let formData = new FormData();
        //名 , blob值
        formData.append('avatar', blob);
        xhr.open('post', 'http://localhost:8080/upload', true);
        xhr.send(formData);
      }, false);
	
	
      if (fileList[0]) {
        //读取，上传的文件为 转化为base64
        //在这里转化成功，会监听load事假
        reader.readAsDataURL(fileList[0]);
      }
    }

  </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

服务端代码
let express = require('express');
let path = require('path');
let cors = require('cors');
let app = express();
app.use(cors())
app.use(express.static(path.join(__dirname, 'public')))
const multer = require('multer');

//uploads文件存放的地址，没有会报错
//上传的图片会自动保存再这个文件夹
app.use(multer({ dest: './uploads' }).single('avatar'))

// 名字 不对或者个数不对都会报此错
// MulterError: Unexpected field at wrappedFileFilterat Busboy.
app.post('/upload2', upload.array('pic', 5), function (req, res) {
  res.send('upload ok!');
});


app.post('/upload', function (req, res) {
  console.log(req.file, req.body)
  res.json({ sucess: true })
})
app.listen(8080, () => {
  console.log('成功')
})
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

将base64转换为文件直接newFile


 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});
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

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