nodejs接收前端传入的文件

比如前端有一个文件上传的功能

<div>
    <input type="file">
    <button>开始上传</button>
</div>
<script>
    const btn = document.querySelector('button');
    btn.onclick = async()=>{
        const fileInput = document.querySelector('input');

        // 拼接参数
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        // 开始上传
        const res = await fetch('/upload',{method: 'POST', body: formData}).then(res=>res.json());
        console.log(res);
    }
</script>

如果后端是nodejs原生写的一个服务，改如何处理接收呢？

简单处理

我们可以这样做

import { createServer } from "http";
import path from 'path';
import { __dirname } from './utils/index.js'
import fs from 'fs'

const httpServer = createServer((req, res) => {
    const { url } = req;
    if (url === '/upload') {
        console.log('开始上传');

        let body = '';
        req.on("data", (chunk) => {
            console.log("上传中");
            body += chunk;
        })

        req.on("end", () => {
            const recFile = path.join(__dirname, '../a.png');
            fs.writeFile(recFile, body, 'binary', (err) => {
                console.log("上传完成");
                if (!err) {
                    res.end("sucess")
                }
            })
        })
    }

}); // 创建一个http服务
httpServer.listen(3000, () => console.log('服务已经启动： http://127.0.0.1:3000')); // 启动http服务

那一个图片传入举例，我们会发现图片确实被存储到项目中。

但是紧接着我们就会发现，图片打不开！

强制使用记事本或者开发工具以编码形式打开看看 会发现内部文件类似于这样的

------WebKitFormBoundarye8NwBtLb3tKGD502
Content-Disposition: form-data; name="file"; filename="jd.jpg"
Content-Type: image/jpeg

ÿØÿàJFIFÿÛCÿÛCÿM"ÿÄ
ÿÄ.     "#$%!&'45ÿÿÄ>!1"A2Q#aq
����
ÿØÿàJFIFÿÛCÿÛCÿM"ÿÄ
ÿÄ.     "#$%!&'45ÿÿÄ>!1"A2Q#aq
------WebKitFormBoundarye8NwBtLb3tKGD502--

我们来解析一下这里边的结构

其中数据边界描述和文件的其他信息 在请求头里 浏览器也帮我们加上了这些属性。和传入后端的body内部保持一致



boundary即为数据边界描述的意思，文件上传时内容是分段传输的，每一boundary表示一个fild(form表单控值)边界，用于可能存在的分段上传。

分析原因

上一步我们已经分析了接收到的数据，

通过分析body我们得知：body数据多了一些和文件二进制本身无关的其他信息。

那么处理起来就很简单了，我们只需要把这些无用信息去除即可。

最后再将蓝色部分的纯文件二进制写入到文件即可。

处理办法

if (url === '/upload') {
    req.setEncoding('binary'); // 将传入的文件设为二进制编码（若本身为二进制，此步可省）

    // 边界字符串
    var boundary = req.headers['content-type'].split('; ')[1].replace('boundary=', '');

    let body = '';  // 请求体（前端post传入的所有参数内容）
    req.on('data', function (chunk) { body += chunk; });

    let fileName = ''; // 文件名
    req.on('end', function () {
        // 处理前端传入的二进制数据，格式化成json
        const file = querystring.parse(body, '\r\n', ':');

        //通过Content-Disposition来获取文件相关信息
        const fileCtd = file['Content-Disposition'].split('; ');
        for (const value in fileCtd) {
            if (fileCtd[value].indexOf("filename=") != -1) {
                fileName = fileCtd[value].substring(10, fileCtd[value].length - 1);
                if (fileName.indexOf('\\') != -1) {
                    fileName = fileName.substring(fileName.lastIndexOf('\\') + 1);
                }
            }
        }

        // 获取文件类型
        const fileType = file['Content-Type'];

        var entireData = body.toString();

        // var contentTypeRegex = /Content-Type: image\/.*/;
        const contentType = file['Content-Type'].substring(1);

        // --===提取只包含文件本身二进制数据，去除前后的其它内容 start===--
        // 1. 移除前置多余字符：根据contentType字段来定位
        var upperBoundary = entireData.indexOf(contentType) + contentType.length;
        var shorterData = entireData.substring(upperBoundary);
        console.log(upperBoundary);
        console.log(shorterData);
        // 2. 替换开始位置的空格
        var binaryDataAlmost = shorterData.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        // 3. 移除后置多余字符：根据 "--"+ boundary + "--" 来定位
        var binaryData = binaryDataAlmost.substring(0, binaryDataAlmost.indexOf('--' + boundary + '--'));
        // --===提取只包含文件本身二进制数据，去除前后的其它内容 end===--

        // 保存文件
        fs.writeFile(fileName, binaryData, 'binary', (err) => {
            res.end('图片上传完成');
        });
    });
}

参考这篇文章：我的另一篇文章