通过 FileReader 完成文件上传

2021-01-21 本文已影响0人 CondorHero

通过 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