1

問題: 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
4

1 に答える 1