文件上传

文件上传需要使用 multer 模块。

Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。

注意,body-parser 是用于处理 application/x-www-form-urlencoded 类型的表单数据。

$ yarn add multer
  • multer().any() 允许上传所有文件
  • multer().array('image') 允许上传指定类型的文件

获取上传文件的信息

app.js

const express = require('express')
const bodyParser = require('body-parser')
const multer = require('multer')
const app = express()
app.use(multer().any())
// 开启服务器
let server = app.listen(8088, () => {
  let host = server.address().address
  let port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})
// 路由
app.use('/', (req, res, next) => {
  console.log(req.files)
  res.end()
})

uploader.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>uploader</title>
  </head>
  <body>
    <form action="http://localhost:8088/" method="post" enctype="multipart/form-data">
      文件:<input type="file" name="f1" /><br>
      <input type="submit" value="上传">
    </form>
  </body>
</html>

运行并上传文件,会看到控制台打印出如下格式的信息:

[ { fieldname: 'f1',
    originalname: '100.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 60 00 60 00 00 ff e1 00 08 45 78 69 66 00 00 ff db 00 43 00 08 06 06 07 06 05 08 07 07 07 09 09 08 0a 0c ... >,
    size: 2492 } ]

上传到指定目录

multer() 中可以传入一个配置选项,设置上传路径。

const express = require('express')
const bodyParser = require('body-parser')
const multer = require('multer')
const app = express()
app.use(multer({
  dest: './www/upload'
}).any())
// 开启服务器
let server = app.listen(8088, () => {
  let host = server.address().address
  let port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})
// 路由
app.use('/', (req, res, next) => {
  console.log(req.files)
  res.end()
})

注意此时上传后的控制台输出:

[ { fieldname: 'f1',
    originalname: '100.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: './www/upload',
    filename: '0c85159087f373ffa20c9ed95de3942e',
    path: 'www\\upload\\0c85159087f373ffa20c9ed95de3942e',
    size: 2492 } ]

可以看到,多了一个 destinationfilenamepath 字段,而少了 buffer 字段。

再查看 www/upload 下,的确多了一个上传后的文件。

重命名上传文件

由于上传后的文件名是一串随机字串,连扩展名都没有,因此需要对文件进行重命名,使用 fs.rename 即可重命名。

const express = require('express')
const bodyParser = require('body-parser')
const multer = require('multer')
const fs = require('fs')
const path = require('path')
const app = express()
app.use(multer({
  dest: './www/upload'
}).any())
// 开启服务器
let server = app.listen(8088, () => {
  let host = server.address().address
  let port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})
// 路由
app.post('/', (req, res) => {
  for (let i = 0; i < req.files.length; i++) {
    let file = req.files[i];
    let newName = file.path + path.parse(file.originalname).ext
    fs.rename(file.path, newName, (err) => {
      if (err) {
        res.send('上传失败')
      } else {
        res.send('上传成功')
      }
    })
  }
})

此时就可以实现多文件上传,并自动更改为随机名称,带扩展名。

实例

app.js

var fs = require("fs")
var multer  = require('multer')
let bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(multer({ dest: '/tmp/'}).array('image'))
app.get('/uploader.html', function (req, res) {
  res.sendFile( __dirname + "/" + "uploader.html" );
})
app.post('/file_upload', function (req, res) {
  console.log(req.files[0]);  // 上传的文件信息
  let des_file = __dirname + "/" + req.files[0].originalname
  fs.readFile( req.files[0].path, function (err, data) {
    fs.writeFile(des_file, data, function (err) {
      if( err ){
        console.log( err )
      }else{
        response = {
          message:'File uploaded successfully',
          filename:req.files[0].originalname
        }
      }
      console.log( response );
      res.end( JSON.stringify( response ) )
    })
  })
})

uploader.html

<html>
<head>
  <title>文件上传表单</title>
</head>
<body>
  <h3>文件上传:</h3>
  选择一个文件上传:
  <br />
  <form action="/file_upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" size="50" />
    <br />
    <input type="submit" value="上传文件" />
  </form>
</body>
</html>

访问 http://localhost:8081/uploader.html 可以测试上传结果,在站点根目录下可以看到上传的文件。

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress