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