如何处理Dropzone&amp ;; Multer（chunked post calls） [英] How to handle files from Dropzone & Multer (chunked post calls)

问题描述

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

Problem: I am using a Vue JS implementation of Dropzone.js and Multer to upload files. The problem I'm seeing is Dropzone making a POST call for each chunk of data that it has read. After searching Google, I can't find any examples on how to accept these requests.

我的VueJS& Dropzone.js分别设置

My VueJS & Dropzone.js setup respectively

<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
    }

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

And my backend code looks like something like this:

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

推荐答案

如果您不需要块，您的节点代码似乎无法处理分块上传上传（用于大量上传），您只需将dropzone上的设置更改为 chunking：false

Your node code doesn't seem to be able to handle chunked uploads, if you don't need chunk upload (it's used for big uploads), you should just turn it off by changing the setting on dropzone to chunking: false

这篇关于如何处理Dropzone&amp ;; Multer（chunked post calls）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！