急行ファイルアップロード機能のためのNode.jsの枠組みについて

利用multerミドルウェア

0インストール:

npm install multer --save

1.単一ファイルのアップロード

<!--客户端-->
<form action="/xxx" method="POST" enctype="multipart/form-data">
    <input type="text" name="username">
    <input type="file" name="myfile">
    <button type="submit">提交</button>
</form>
// 服务端
const express = require('express');
const app = express();
app.use(express.static('views'));
// 引入中间件模块
const multer = require('multer')
// 指定上传目录
const upload = multer({ dest: 'uploads/' });
// 单文件上传
app.post('/xxx', upload.single('myfile'), function (req, res, next) {
    // req.body 对象中是表单中提交的文本字段(如果有)
    console.log(req.body);
    // 被上传的文件信息
    console.log(req.file);
})
app.listen(80, '127.0.0.1', function () {
    console.log('启动成功');
});

2.複数ファイルのアップロード1

<!--客户端-->
<form action="/xxx" method="POST" enctype="multipart/form-data">
    <input type="text" name="username">
    <!-- multiple 表示允许多文件上传 -->
    <input type="file" name="myfile" multiple>
    <button type="submit">提交</button>
</form>
// 服务端
const express = require('express');
const app = express();
app.use(express.static('views'));
// 引入中间件模块
const multer = require('multer')
// 指定上传目录
const upload = multer({ dest: 'uploads/' });
// 多文件上传 upload.array 
// 第一个参数表示file的name 
// 第二个参数表示一次最大支持上传的数量, 客户端上传的超出数量的话会报错,本参数可以不设置,表示不限制数量
app.post('/xxx', upload.array('myfile', 2), function (req, res, next) {
    // req.body 对象中是表单中提交的文本字段(如果有)
    console.log(req.body);
    // 被上传的文件信息 注意这里是.files
    console.log(req.files);
})
app.listen(80, '127.0.0.1', function () {
    console.log('启动成功');
});

3.マルチファイルアップロード2

<form action="/xxx" method="POST" enctype="multipart/form-data">
    <input type="text" name="username">
    <!-- multiple允许多文件上传 -->
    <input type="file" name="myfile1" multiple>
    <input type="file" name="myfile2" multiple>
    <button type="submit">提交</button>
</form>
const express = require('express');
const app = express();
app.use(express.static('views'));
// 引入中间件模块
const multer = require('multer')
// 指定上传目录
const upload = multer({ dest: 'uploads/' });
// 多文件上传  upload.fields传入的是数组,
app.post('/xxx', upload.fields([
    {name: 'myfile1', maxCount: 2},
    {name: 'myfile2', maxCount: 2}
]), function (req, res, next) {
    // req.body 对象中是表单中提交的文本字段(如果有)
    console.log(req.body);
    // 被上传的文件信息 注意这里是.files
    console.log(req.files);
})
app.listen(80, '127.0.0.1', function () {
    console.log('启动成功');
});

4.データがアップロードを説明します

fieldname - 表单提交的文件名(input控制的name属性)
originalname - 文件在用户设备中的原始名称
encoding - 文件的编码类型
mimetype - 文件的Mime类型
size - 文件的大小
destination - 文件的保存目录(DiskStorage)
filename - 文件在destination中的名称(DiskStorage)
path - 上传文件的全路径(DiskStorage)
buffer - 文件对象的Buffer(MemoryStorage)

延長問題

我々はfs.rename()メソッドはそれらを修正するためにどのようなサフィックス変更になる前に書かれたと一緒になって、あなたは情報アップロードされたファイルを取得するには、実際には、アップロードされたファイルの拡張子ではないでしょう、ファイルをアップロードしました。

しかしmulter自体は、ディスク・ストレージ・エンジンを使用するような方法で、数を提供してくれますdiskStorage

const express = require('express');
const app = express();
app.use(express.static('views'));
// 使用mime模块获取后缀名
const mime = require('mime');
// 引入中间件模块
const multer = require('multer')
// 自定义存储引擎
let storage = multer.diskStorage({
    // 自定义存储路径
    destination: function (req, file, cb) {
        cb(null, __dirname + '/uploads')
    },
    // 自定义文件名
    //cb是express中提前写好的一个函数,我们调用即可
    filename: function (req, file, cb) {
      	// 最后随机生成文件名
        cb(null, file.fieldname + '.' + mime.getExtension(file.mimetype));
     }
})
// 指定存储引擎
const upload = multer({ storage: storage });
// 多文件上传 
app.post('/xxx', upload.fields([
    { name: 'myfile1', maxCount: 2 },
     { name: 'myfile2', maxCount: 2 }
]), function (req, res, next) {
    // req.body 对象中是表单中提交的文本字段(如果有)
    console.log(req.body);
    // 被上传的文件信息 注意这里是.files
    console.log(req.files);
    res.send();
})

使用することをお勧めしますfs.rename()使用のようなもので。

6.アップロード制限と誤ってブロックされました

const express = require('express');
const app = express();
app.use(express.static('views'));
// 使用mime模块获取后缀名
const mime = require('mime');
// 引入中间件模块
const multer = require('multer')
// 指定上传目录 
const upload = multer({ 
    dest: 'uploads/',
    // 限制文件上传的大小和数量
    limits:{
        //限制文件大小10kb
        fileSize: 10*1000,
        //限制文件数量
        files: 5
    },
    // 限制上传文件的类型
    fileFilter: function(req, file, cb){
        // 限制文件上传类型,仅可上传png格式图片
        if(file.mimetype == 'image/png'){
            cb(null, true)
        } else {
            cb(null, false)
        }
    }
});
// 多文件上传 
// 设置上传字段的接收部分
let up = upload.fields(
    [ {name: 'myfile1', maxCount: 2}],
    [ {name: 'myfile2', maxCount: 2}],
);
app.post('/xxx', function (req, res) {
    up(req, res, function (err) {
        console.log(req.body);
        console.log(req.files);
        console.log(err);
    })
})
app.listen(80, '127.0.0.1', function () {
    console.log('启动成功');
});
公開された22元の記事 ウォンの賞賛0 ビュー1145

おすすめ

転載: blog.csdn.net/bigpatten/article/details/103967923