How to handle files from Dropzone & Multer (chunked post calls)

问题

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.

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")
});

Output:

...
{ 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

回答1:

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

来源：https://stackoverflow.com/questions/50918759/how-to-handle-files-from-dropzone-multer-chunked-post-calls

标签

javascript

file

Vue.js

upload

dropzone