如何使用带有分块的multer处理expressjs中的plupload？答案

【问题标题】：How to handle plupload in expressjs using multer with chunking?如何使用带有分块的multer处理expressjs中的plupload？
【发布时间】：2018-02-26 22:46:06
【问题描述】：

我正在前端使用 Plupload 实现文件上传，并在后端使用 multer 中间件表达 nodejs 以进行多部分/表单上传。目前没有可用的示例，所以这是我目前得到的：

HTML 前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
</head>

    <ul id="filelist"></ul>
    <br />

    <div id="container">
        <a id="browse" href="javascript:;">[Browse...]</a>
        <a id="start-upload" href="javascript:;">[Start Upload]</a>
        <br />
        <pre id="console"></pre>
    </div>
    <script src="/plupload/js/plupload.full.min.js"></script>
    <script type="text/javascript">
        var uploader = new plupload.Uploader({
            browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
            url: '/upload'
        });
        uploader.init();

        uploader.bind('FilesAdded', function(up, files) {
            var html = '';
            plupload.each(files, function(file) {
                html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
            });
            document.getElementById('filelist').innerHTML += html;
        });
        uploader.bind('UploadProgress', function(up, file) {
            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        });
        uploader.bind('Error', function(up, err) {
            document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
        });
        document.getElementById('start-upload').onclick = function() {
            uploader.start();
        };
    </script>
</html>

它基本上只是 plupload 快速入门指南：http://www.plupload.com/docs/v2/Getting-Started

后端使用 node express。我将我的代码缩减为最低工作版本，以便在 SO 上使用：

const path = require('path');
const express = require('express');
var multer  = require('multer');
var upload = multer({ dest: 'uploads/' });

// Create express 
const app = express();
app.use(express.static('public'));
app.post('/upload', upload.array('file'), function(req, res){
  console.log(req.files);
})
app.listen(3000, function () {
  console.log('App running...');
});

基本上，只是一个带有 multer 包并提供静态文件的常规快递应用程序。

问题：

如何在前端使用 Plupload 并在后端使用 NodeJS（使用 express、multer）上传文件？它还应该支持分块。

【问题讨论】：

标签： node.js express plupload

【解决方案1】：

您可以在上传文件之前使用fileFilter 函数验证文件，该函数使您能够验证文件名、扩展名以及应上传哪些文件以及应跳过哪些文件。

例如，假设您希望用户只上传“PDF”文件，您可以编写这样的过滤器，

multer({
    fileFilter: function (req, file, cb) {
        if (file.mimetype !== 'application/pdf') {
            req.fileValidationError = 'Only PDF files can be uploaded';
            return cb(null, false, new Error('Only PDF files can be uploaded'));
        }
        cb(null, true);
    }
});

如果你想限制用户上传一定MB以内的文件，你可以使用limits属性，可以设置为，

limits: { fileSize: the_file_size_which_you_want_to_allow }

最后，如果你想在你的目标目录（文件被上传的地方）有一个通用的文件命名模式，你可以像这样使用fileName 函数，（在下面的例子中，我们附加了一个连字符和文件名的时间戳）。

filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
}

更新

您可以使用 plupload 节点模块，该模块将处理您尝试解决的 express-plupload 通信。

希望这会有所帮助！

【讨论】：

嗨，大卫，知道如何让 plupload 表达“谈话”吗？
@kosinix 是的，你可以很容易地做到这一点，检查我上面的更新答案（在 Update 标题下）