node express 文件上传

心已赠人 2021-08-14 01:25 376阅读 0赞

主要使用`multer`来实现文件上传。顺便记录一下`multer`的API  
插件： `multer`： 文件上传中间件，[multer][]  
`cors`: 解决跨域中间件 [cors][]

**前端代码**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="e:/accumulate/plugin/jquery/jquery-3.3.1.min.js"></script>
    </head>
    
    <body>
        <input type="file" id="inp">
        <button>submit</button>
        <script> $('button').click(()=>{ const file_ = $('#inp').get(0).files[0] let formdata = new FormData() formdata.append('avatar', file_) var xhr = new XMLHttpRequest(); xhr.open("post", 'http://localhost:3001/', true); xhr.onreadystatechange=function(){ // readyState == 4说明请求已完成 if(xhr.readyState==4){ if(xhr.status==200 || xhr.status==304){ console.log(xhr.responseText); } } } xhr.send(formdata); }) </script>
    
    </body>
    
    </html>

##### 单个文件上传， #####

`upload.single(fieldname)` : 接受一个以 `fieldname` 命名的文件。这个文件的信息保存在 `req.file`。

const app = require('express')()
    const cors = require('cors')
    const fs = require('fs')
    const multer = require('multer')
    const upload = multer({  dest: 'update/' })  // 指定上传文件的存放位置，如果不存在则会新建一个（文件夹）。
    app.use(cors())
    app.use('/', upload.single('avatar'),function (req, res) {    //这里single('avatar') 指定前端所使用的avatar字段。如果不对应，则会报错
        // fs.rename('旧文件路径','新文件路径',回调函数)
        // console.log(req.file) 这里存放了上传的文件信息。
        let old_path = req.file.path  //储存的路径 不带后缀名
        let new_path = req.file.path + '.' + req.file.originalname.split('.')[1]  // 新路径 + uuid + 后缀名
        fs.rename(old_path, new_path, (err) => { 
            if(err) return
            console.log('重命名成功')
            res.send('上传成功')
        })
    })
    
     app.listen('3001',()=> console.log('run 3001'))

###### 磁盘存储引擎 ######

const app = require('express')()
    const cors = require('cors')
    const fs = require('fs')
    const multer = require('multer')
    const bodyParser = require('body-parser')
    app.use(cors())
    
    let storage = multer.diskStorage({ 
        destination: (req, file, cb)=>{ 
            cb(null, './files/') //指定文件存储路径，
        },
    })
    const upload = multer({ storage: storage}) //表示用硬盘的储存方式
    
    app.use(upload.single('avatar'));  //单个文件上传
    
    app.use('/', function (req, res) {  
        console.log(2, req.file);
        let old_path = req.file.path  //储存的路径 不带后缀名
        let new_path = req.file.path + '.' + req.file.originalname.split('.')[1]  // 新路径 + uuid + 后缀名
        fs.rename(old_path, new_path, (err) => { 
            if(err) return
            console.log('重命名成功')
            res.send('上传成功')
        })
    })
    
     app.listen('3001',()=> console.log('run 3001'))

有两个选项可用，`destination` 和 `filename`。他们都是用来确定文件存储位置的函数。

*  `destination` 是用来确定上传的文件应该存储在哪个文件夹中。也可以提供一个 `string` (例如 `'/tmp/uploads'`)。如果没有设置 `destination`，则使用操作系统默认的临时文件夹。
    
    **注意**: 如果你提供的 `destination` 是一个函数，你需要负责创建文件夹。当提供一个字符串，`multer` 将确保这个文件夹是你创建的。
 *  `filename` 用于确定文件夹中的文件名的确定。 如果没有设置`filename`，每个文件将设置为一个随机文件名，并且是没有扩展名的。
    
    **注意**: Multer 不会为你添加任何扩展名，你的程序应该返回一个完整的文件名。

###### 内存存储引擎 (MemoryStorage) ######

内存存储引擎将文件存储在内存中的 `Buffer` 对象，它没有任何选项。

当使用内存存储引擎，文件信息将包含一个 `buffer` 字段，里面包含了整个文件数据。

**警告**: 当你使用内存存储，上传非常大的文件，或者非常多的小文件，会导致你的应用程序内存溢出。

var storage = multer.memoryStorage()
    var upload = multer({  storage: storage })

##### 多个文件上传 #####

多个文件上传的时候文件对象保存在 `req.files` 数组里；输出如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yY2VlbA_size_16_color_FFFFFF_t_70]

*  `single(fieldname)`  
    接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。
 *  `.array(fieldname[, maxCount])`  
    接受一个以 fieldname 命名的文件数组。可以配置 maxCount 来限制上传的最大数量。这些文件的信息保存在 req.files。
 *  `.fields(fields)`  
    接受指定 fields 的混合文件。这些文件的信息保存在 req.files。  
    fields 应该是一个对象数组，应该具有 name 和可选的 maxCount 属性。
    
    Example:
    
        [
          { name: 'avatar', maxCount: 1 },
          { name: 'gallery', maxCount: 8 }
        ]
 *  `.none()`  
    只接受文本域。如果任何文件上传到这个模式，将发生 “LIMIT\_UNEXPECTED\_FILE” 错误。这和 upload.fields(\[\]) 的效果一样。
 *  `.any()`  
    接受一切上传的文件。文件数组将保存在 req.files。
    
    警告: 确保你总是处理了用户的文件上传。 永远不要将 multer 作为全局中间件使用，因为恶意用户可以上传文件到一个你没有预料到的路由，应该只在你需要处理上传文件的路由上使用。

[multer]: https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
[cors]: https://www.npmjs.com/package/cors
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yY2VlbA_size_16_color_FFFFFF_t_70]: /images/20210813/620e5a76206b481aaa20837b53682357.png