原生Node.js文件上传：准备工作

1.数据发到后台是什么样的

image.png

------WebKitFormBoundaryVyYDzqk4CRSWKIPf
Content-Disposition: form-data; name="user"

mark
------WebKitFormBoundaryVyYDzqk4CRSWKIPf
Content-Disposition: form-data; name="password"

123
------WebKitFormBoundaryVyYDzqk4CRSWKIPf
Content-Disposition: form-data; name="fname"; filename="test.txt"
Content-Type: text/plain

aaa
bbb
cccc //test.txt内容
------WebKitFormBoundaryVyYDzqk4CRSWKIPf--
// --是标志

分析：

<分隔符>\r\n
Content-Disposition: form-data; name="user"\r\n
\r\n
mark\r\n
<分隔符>\r\n
Content-Disposition: form-data; name="password"\r\n
\r\n
123
<分隔符>\r\n
Content-Disposition: form-data; name="fname"; filename="test.txt"\r\n
Content-Type: text/plain\r\n
\r\n
<文件内容>\r\n
<分隔符>-- 


<分隔符>\r\n<数据描述>\r\n\r\n数据值\r\n
<分隔符>\r\n<数据描述>\r\n\r\n数据值\r\n
<分隔符>\r\n<数据描述1>\r\n<数据描述2>\r\n\r\n<文件内容>\r\n
<分隔符>--

1.用<分隔符>切开数据
[
    <空Buffer>,
    \r\n数据描>\r\n\r\n数据值\r\n,
    \r\n数据描述\r\n\r\n数据值\r\n,
    \r\n数据描述1\r\n数据描述2\r\n\r\n文件内容\r\n,
    --
]

2.丢弃头尾
[
    \r\n数据描述\r\n\r\n数据值\r\n,
    \r\n数据描述\r\n\r\n数据值\r\n,
    \r\n数据描述1\r\n数据描述>\r\n\r\n文件内容\r\n,
]

3.丢弃每一项的头尾\r\name
[
    数据描述\r\n\r\n数据值,
    数据描述\r\n\r\n数据值,
    数据描述1\r\n数据描述2\r\n\r\n文件内容,
]

4.用第一次出现的'\r\n'切分  （因为文件内可能出现'\r\n'）
    [数据描述, 数据值]  //普通数据
    [数据描述1\r\n数据描述2, 文件内容] //文件数据

5.判断描述里有没有'\r\n'

6.分析数据描述

Server.js

const http = require('http')
const fs = require('fs')

let server = http.createServer((req, res) => {

    let str = ''
    req.on('data', data => {
        str += data
    })

    req.on('end', () => {
        console.log(str)
        res.end()
    })
})

server.listen(8080, () => {
    console.log('http://localhost:8080/');
})

HTML

<form action="http://localhost:8080/upload" method="POST" enctype="multipart/form-data">
        <input type="text" name="user">
        <input type="password" name="password">
        <input type="file" name="fname">
        <input type="submit" value="提交">
    </form>

Buffer操作

上面直接把数据存到字符串里面，对于文本文件可以 但是其他类型文件会损坏数据

let buf1 = Buffer.from('afda-+-sdasfq-+-werw')
let buf2 = Buffer.from('2333')

console.log(buf1.indexOf('-+-')); // 4

console.log(buf1.slice(0, 4).toString()); // afda

console.log(Buffer.concat([buf1, buf2]).toString()); //afda-+-sdasfq-+-werw2333


Buffer.prototype.split = Buffer.prototype.split || function (separator) {
    let arr = [];
    let cur = 0;

    let n = 0;

    while ((n = this.indexOf(separator, cur)) != -1) {
        arr.push(this.slice(cur, n));
        cur = n + separator.length;
    }

    arr.push(this.slice(cur));

    return arr;
}

console.log(buf1.split('-+-').toString());  //afda,sdasfq,werw

let server = http.createServer((req, res) => {

    let arr = []
    req.on('data', data => {
        arr.push(data)
    })

    req.on('end', () => {
        let data = Buffer.concat(arr)
        console.log(data);
        res.end()
    })
})

<Buffer 2d 2d 2d 2d 2d 2d 57 65 62 4b 69 74 46 6f 72 6d 42 6f 75 6e 64 61 72 79 49 58 31 47 56 34 52 49 57 79 62 57 75 49 50 46 0d 0a 43 6f 6e 74 65 6e 74 2d ... 337 more bytes>
<Buffer >
//提交的时候会有两个Buffer 第二个是浏览器的favicon的请求