时间戳

首页 > 解决方案 > 如何处理来自 Dropzone 和 Multer 的文件（分块后调用）

javascript - 如何处理来自 Dropzone 和 Multer 的文件（分块后调用）

问题描述

问题：我正在使用 Dropzone.js 和 Multer 的 Vue JS 实现来上传文件。我看到的问题是 Dropzone 对其已读取的每个数据块进行 POST 调用。搜索谷歌后，我找不到任何关于如何接受这些请求的例子。

我的 VueJS 和 Dropzone.js 分别设置

<vue-dropzone id="drop1" :options="dropOptions" @vdropzone-complete="templateFileCompleteFn"></vue-dropzone>


dropOptions: {
      url: " http://localhost:3000/api/external/usage/",
      method: "POST",
      maxFilesize: 2, // MB
      maxFiles: 4,
      chunking: true,
      chunkSize: 500, // Bytes
      thumbnailWidth: 150, // px
      thumbnailHeight: 150,
      addRemoveLinks: true
    }

我的后端代码看起来像这样：

var multer  = require('multer')
var storage =   multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, '../../uploads');
    },
    filename: function (req, file, callback) {
      callback(null, file.fieldname + '-' + Date.now());
    }
  });

var upload = multer({ storage : storage })

router.post('/', upload.any(), async function(req, res, next) {

    console.log(req.body)    
    console.log(req.files)    
    res.end()
    res.status(200).send("ok")
});

输出：

...
{ dzuuid: 'a9142091-9d53-4112-b368-41b811127b4c',
  dzchunkindex: '4',
  dztotalfilesize: '7986',
  dzchunksize: '500',
  dztotalchunkcount: '16',
  dzchunkbyteoffset: '2000' }
[ { fieldname: 'file',
    originalname: 'todo.txt',
    encoding: '7bit',
    mimetype: 'application/octet-stream',
    destination: '../../uploads',
    filename: 'file-1529364135774',
    path: '../../uploads/file-1529364135774',
    size: 500 } ]
POST /api/external/usage/ 200 3.226 ms - -
(node:4810) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): Error: Can't set headers after they are sent.
{ dzuuid: 'a9142091-9d53-4112-b368-41b811127b4c',
  dzchunkindex: '5',
  dztotalfilesize: '7986',
  dzchunksize: '500',
  dztotalchunkcount: '16',
  dzchunkbyteoffset: '2500' }
[ { fieldname: 'file',
    originalname: 'todo.txt',
    encoding: '7bit',
    mimetype: 'application/octet-stream',
    destination: '../../uploads',
    filename: 'file-1529364135789',
    path: '../../uploads/file-1529364135789',
    size: 500 } ]
...
more of the same

标签： javascriptfilevue.jsuploaddropzone

解决方案

您的节点代码似乎无法处理分块上传，如果您不需要分块上传（它用于大上传），您应该通过将 dropzone 上的设置更改为分块来关闭它：false

推荐阅读