如何处理Dropzone&amp ;; Multer(chunked post calls)

时间:2018-06-18 23:32:53

标签: javascript file vue.js upload dropzone

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

我的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

1 个答案:

答案 0 :(得分:0)

您的节点代码似乎无法处理分块上传,如果不需要分块上传(用于大上传),只需将dropzone的设置更改为即可将其关闭分块:false