问题:我正在使用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
答案 0 :(得分:0)
您的节点代码似乎无法处理分块上传,如果不需要分块上传(用于大上传),只需将dropzone的设置更改为即可将其关闭分块:false