通过 FileReader 完成文件上传.png
前言： 之前我总以为浏览器上传文件就一种方式——表单（表单包括 HTML 的 Form 表单，和虚拟表单 FormData 两种）。现在我又接触了一种文件上传方法，那就是通过 HTML5 的 FileReader 来完成文件上传。
重点来了：
- 浏览器获取用户电脑本地的文件，是通过
<input type="file" />标签来完成。 - 获取的内容上传到服务器，可以通过表单来完成，也可以通过 FileReader 来完成。
接下来，我们就看看如何利用 HTML5 的 FileReader 结合 NodeJS 实现文件上传。
一、认识 FileReader
FileReader 直译为文件读取，那肯定和 File 对象有关系，File 继承于 Blob，所以 FileReader 和 Blob 也有关系。此时你再去搂一遍文档，FileReader-MDN，你就会发现 FileReader API 的主要功能就是：
FileReader 可以把 File 或 blob 对象转化为另一种格式（例如base64），转化为另一种格式后常用于图片预览和文件上传。
FileReader 的生命周期
FileReader 附带有 6 个主要事件：
- loadstart：当我们开始加载文件时触发。
- progress：当在内存中读取 Blob 时触发。
- abort：读取文件被打断时触发。
- error：发生错误时触发。
- load：读取成功时触发。
- loadend：无论读取文件成功还是失败，最后都会触发。
FileReader 方法
常见的四个方法：
-
readAsArrayBuffer(file)：读取文件或 Blob 作为数组缓冲区。常用于大文件上传。 -
readAsDataURL(file)：这将返回一个 URL，它是 Base64 编码的，常用于小文件上传和图片预览。 -
readAsBinaryString(file)：以二进制字符串读取文件，不常用，我也没用过。 -
readAsText(file, format)：将文件读取为 USVString（几乎像一个字符串），并且可以指定可选格式。不常用，我也没用过。
二、FileReader 图片预览
FileReader 通过 readAsDataURL 方法能把文件对象转化成 base64 格式的 URL ，这个 URL 可以通过 img 标签被直接呈现在页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片预览</title>
<style>
body {
width: 20%;
margin: 100px auto;
}
</style>
</head>
<body>
<input type="file" onchange="handleFileChange(this)" />
<br />
<br />
<script>
function handleFileChange(instance) {
const file = instance.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
const base64URL = e.target.result;
const img = new Image();
img.alt = img.title = file.name;
img.src = base64URL;
document.body.appendChild(img);
};
}
</script>
</body>
</html>
演示效果：
FileReader 图片预览
除了这种方法可以做到图片预览，还有一种方法也能做图片预览，而且实现更加简单，那就是 URL.createObjectURL，它会把文件对象变成 blob 对象，然后直接被 img 标签读取，我们来看下怎么实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片预览</title>
<style>
body {
width: 20%;
margin: 100px auto;
}
</style>
</head>
<body>
<input type="file" onchange="handleFileChange(this)" />
<br />
<br />
<script>
let imgUrl;
function handleFileChange(instance) {
const file = instance.files[0];
imgUrl = globalThis.URL.createObjectURL(file);
const img = new Image();
img.alt = img.title = file.name;
img.src = imgUrl;
document.body.appendChild(img);
}
// 解除 imgUrl
globalThis.addEventListener("beforeunload", (event) => {
imgUrl && globalThis.URL.revokeObjectURL(imgUrl);
event.preventDefault();
event.returnValue = "哈哈哈";
});
</script>
</body>
</html>
看下演示效果：
createObjectURL 图片预览
三、FileReader 文件上传
在写前端代码之前，先来写下后端，后端这里使用 NodeJS + Express 来实现，我们来看下代码实现：
const bodyParser = require("body-parser");
const path = require("path");
const express = require("express");
const app = express();
const fs = require("fs");
// 解析有效路径
function resolvePath (dir) {
return path.join(__dirname, dir);
};
// 静态文件
app.use(express.static(resolvePath("/public")));
// 固定写法，处理 POST 请求
// https://expressjs.com/en/4x/api.html#req.body
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// 一个上传的接口
app.post("/upload", function (req, res) {
const { fileName, fileData } = req.body;
// base64 => buffer
const chunk = Buffer.from(fileData, "base64");
const imgUrl = resolvePath(`public/${fileName}`);
// buffer 写入文件
fs.writeFileSync(imgUrl, chunk);
// 返回结果
res.json({
code: "0",
message: "success",
imgUrl: `http://localhost:48488/${fileName}`
});
});
// 启动服务
const port = 48488;
app.listen(port, function () {
console.log(`listen port ${port}`);
});
安装对应的依赖，使用 Node 命令直接启动服务。接下里看前端部分，把文件上传完成之后，再重新在服务器上读取刚刚重新上传的文件地址，返回给前端展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FileReader实现文件上传</title>
<style>
body {
width: 20%;
margin: 100px auto;
}
</style>
</head>
<body>
<input type="file" onchange="handleFileChange(this)" />
<br />
<br />
<script src="./axios.min.js"></script>
<script>
function handleFileChange(instance) {
const file = instance.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
const base64URL = e.target.result;
const fileRes = axios.post("/upload", { fileData: base64URL, fileName: file.name });
fileRes.then((res) => {
const img = new Image();
img.alt = img.title = file.name;
img.style.height = "150px";
img.src = base64URL;
document.body.appendChild(img);
})
};
}
</script>
</body>
</html>
查看演示效果：
2021-01-20 14_35_55.gif
看了演示效果，我们发现代码运行的毫无问题，通过 FileReader 完成文件上传功能已经实现，不过可能这时候你会问了，为什么你演示的时候会有 413 错误呢？
哈哈哈，这个，其实是 body-parser 设置的，我们看下 body-parser-limit 关于当我们上传字符串的说明，说明显示，请求体默认被限制为了
100kb大小。解决办法，就是扩下容，比如扩容到 50M，代码为app.use(bodyParser.json({ limit: "50mb" }));
这个时候，我来问你个问题，你知道为什么文件上传很少用 FileReader 的原因吗？
答：base64 是一种编码方式，文件经过 base64 编码之后，体积会变大，所以不常用 base64 作为文件上传的方式。参见：Encoded size increase
最后
有点遗憾的是通过 FileReader 读取文件转成 ArrayBuffer 上传，没研究成功，这方便资料太少了，我看也没人用这种方式，就算了吧。上传文件还是老老实实的用 FormData 好了。
当前时间 Thursday, January 21, 2021 11:17:54
网友评论