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' });
5.file对象
File 对象是来自用户在一个 <input> 元素上选择文件后返回的
FileList 对象,也可以是来自由拖放操作生成的 DataTransfer
对象或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
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
```powershell
objectURL = URL.createObjectURL(object);
这个新的URL 对象表示指定的 File 对象或 Blob 对象
你可以像使用普通URL那样使用它，比如用在img.src 上。
URL.revokeObjectURL(objectURL)
让浏览器知道不再保留对文件的引用
不可用于文件上传，应为他只是一个文件的引用
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>
服务端代码
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'))
app.post('/upload', function (req, res) {
console.log(req.file, req.body)
res.json({ sucess: true })
})
app.listen(8080, () => {
console.log('成功')
})
//将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});
}
|