node.js如何实现文件上传

一、是什么

文件上传在日常开发中应用很广泛，我们发微博、发微信朋友圈都会用到了图片上传功能

因为浏览器限制，浏览器不能直接操作文件系统的，需要通过浏览器所暴露出来的统一接口，由用户主动授权发起来访问文件动作，然后读取文件内容进指定内存里，最后执行提交请求操作，将内存里的文件内容数据上传到服务端，服务端解析前端传来的数据信息后存入文件里

对于文件上传，我们需要设置请求头为content-type:multipart/form-data

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件

结构如下：

POST /t2/upload.do HTTP/1.1
User-Agent: SOHUWapRebot
Accept-Language: zh-cn,zh;q=0.5
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Content-Length: 60408
Content-Type:multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Host: w.sohu.com

--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data; name="city"

Santa colo
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="desc"
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
 
...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="pic"; filename="photo.jpg"
Content-Type: application/octet-stream
Content-Transfer-Encoding: binary
 
... binary data of the jpg ...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC--

boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾

而xxx是即时生成的字符串，用以确保整个分隔符不会在文件或表单项的内容中出现

每个表单项必须包含一个 Content-Disposition 头，其他的头信息则为可选项， 比如 Content-Type

Content-Disposition 包含了 type和 一个名字为name的 parameter，type 是 form-data，name参数的值则为表单控件（也即 field）的名字，如果是文件，那么还有一个 filename参数，值就是文件名

Content-Disposition: form-data; name="user"; filename="logo.png"

至于使用multipart/form-data，是因为文件是以二进制的形式存在，其作用是专门用于传输大型二进制数据，效率高

#二、如何实现

关于文件的上传的上传，我们可以分成两步骤：

• 文件的上传
• 文件的解析

#文件上传

传统前端文件上传的表单结构如下：

action 就是我们的提交到的接口，enctype="multipart/form-data" 就是指定上传文件格式，input 的 name 属性一定要等于file

#文件解析

文件解析

我们采用multipart模块来进行文件的解析

router.post('/upload', (req, res) => {
    // console.log(req.body)
    var form = new multiparty.Form();
    form.parse(req, function (err, fields, files) {
        try{
            console.log(files)
            var file = files.filedata[0]
            var data = fs.readFileSync(file.path)
            console.log(data)
            fs.writeFileSync(path.join(__dirname, '..', '/public/img', file.originalFilename), data)
        }catch(err){
            res.json({
                code:0,
                msessage:'文件上传失败'
            })
            return
        }
        res.json({
            code:200,
            message:'文件上传成功',
            url: '/img/' + file.originalFilename
        })
    });

在本路由中间中新建了一个mulitparty表单对象，并调用parse方法来解析请求体，回调函数有三个参数：err(错误对象),fields(表单字段对象),file（文件对象），并通过file.path获取文件所在的缓存路径，通过fs模块的readFileSync和writeFileSync读取文件将文件从临时目录移动到目标目录。

还可以采用ajax进行上传

通过向接口发送请求，并获取响应的地址，将获取的图片地址进行渲染。