node.js实现文件上传

node.js实现文件上传

基于node.js express框架，借助multer或connect-multiparty中间件，我们可以实现一个文件上传功能。

下面将利用node.js express框架实现一个文件上传功能，并将上传的文件储存在项目下的tmp文件夹中：

1、使用multer中间件实现

multer中间件是用来处理multiparty/form-data类型的表单数据，用于文件上传

实现细节：

// 初始化项目
npm init

// 安装需要的模块
npm install --save express body-parser multer

项目结构：

在public下的index.html实现一个表单：

<form action="http://127.0.0.1:3000/fileUpload" method="POST" enctype="multipart/form-data">
  <label for="file">上传文件：</label>
  <input type="file" name="file" id="file"><br />
  <input type="submit" value="提交">
</form>

文件上传接口：

const express = require('express')
const app = express()
const fs = require('fs')
const pathLib = require('path')
// 引入body-parser中间件，用来处理post请求体body中的数据
const bodyParser = require('body-parser')
// 引入multer中间件，用于处理上传的文件数据
const multer = require('multer')

const server = app.listen(3000, function(){
  console.log('express + multer 实现文件上传')
})

// 读取静态资源
app.use(express.static('public'))
// 通过配置multer的dest属性， 将文件储存在项目下的tmp文件中
app.use(multer({ dest: './tmp/' }).any())

// 访问index.html页面
app.get('/index.html', function(req, res){
  // 将public下的index.html文件返回去
  res.sendFile(__dirname + '/index.html')
})

// 文件上传接口
app.post('/fileUpload', function(req, res){
  // 上传的文件在req.files中
  const filename = req.files[0].path + pathLib.parse(req.files[0].originalname).ext
  fs.rename(req.files[0].path, filename, function(err){
    if(err){
      res.send(err)
    }else{
      res.send('upload successfully')
    }
  })
})

执行node app.js代码，在浏览器中访问localhost:3000打开文件上传页面，文件上传成功后，在项目下会出现tmp文件夹，里面就是上传的文件；

需要注意的是：文件上传接口在接收到的文件req.files[0]的文件名和路径均不带文件后缀名，为了可以上传的文件可以正常访问，我们需要通过fs和path模块处理

2、使用connect-multiparty中间件实现

const express = require('express')
const app = express()
const fs = require('fs')
const multipart = require('connect-multiparty')
const multipartMiddleware = multipart()
const server = app.listen(3000, function(){
  console.log('express connet-multiparty实现文件上传')
})

app.use(express.static('public'))

app.get('/index.html', function(req, res){
  res.sendFile(__dirname + '/index.html')
})

app.post('/fileUpload', multipartMiddleware, function(req, res){
  console.log(req.files)
  const pathDir = __dirname + '/tmp/' + req.files.file.originalFilename
  // 通过fs模块将上传的文件写入进去tmp文件夹
  fs.readFile(req.files.file.path, function (err, data) {
    fs.writeFile(pathDir, data, function (err) {
      if (err) {
        res.send(err)
      } else {
        res.send('upload successfully')
      }
    })
  })
})

网上看了很多人说可以通过往multipart({ uploadDir : './tmp'})来改变上传文件的路径，我试了一下发现不行，会报错，于是就自己在项目下新建一个tmp文件夹，然后通过fs模块将上传的文件写入进去；

参考文献：

[1] node.js学习之post文件上传 （multer中间件）
[2] node.js实现formdata上传文件
[3] Nodejs express 文件上传
[4] 使用multer模块上传文件到服务器
[5] nodejs 实现简单的文件上传功能