多党文件上传问题使用AngularJS和Nodejs与body解析器

Question

尝试将文件从angularjs UI上传到nodejs服务器，但面对BodyParser的问题，增加了限制的限制 -

" syntaxerror：意外令牌 - 在位置0的JSON中"，

如果未添加掷掷 -

"有效载荷太大"

我正在使用Connect-Multiparty中间件上传文件。在BodyParser中使用{limit：'50MB'}尝试，也没有任何限制。

UI代码 -

$('#imgupload').on('change', function  (evt) {
   let uploadedFiles = evt.target.files;
   let formData = new FormData();
    for (var i = 0; i < uploadedFiles.length; i++) {
        formData.append("uploads[]", uploadedFiles[i], 
        uploadedFiles[i].name);
    }
   let url =   "/upload";
   httpService.restApi(url,formData)
       .then(function (response) {
           console.log("the file has been uploaded to local server 
           ",response);
   });
});

nodejs(服务器代码( -

const  multipart  =  require('connect-multiparty');  
const  multipartMiddleware  =  multipart({ uploadDir:  './uploads' });
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({extended: true}));
app.post('/upload', multipartMiddleware, (req, res) => {  
    res.json({
        'message': 'File uploaded succesfully.'
    });
});

Answer 1

从路径上删除bodyParser中间件：

const  multipart  =  require('connect-multiparty');  
const  multipartMiddleware  =  multipart({ uploadDir:  './uploads' });
̶a̶p̶p̶.̶u̶s̶e̶(̶b̶o̶d̶y̶P̶a̶r̶s̶e̶r̶.̶j̶s̶o̶n̶(̶{̶l̶i̶m̶i̶t̶:̶ ̶'̶5̶0̶m̶b̶'̶}̶)̶)̶;̶
̶a̶p̶p̶.̶u̶s̶e̶(̶b̶o̶d̶y̶P̶a̶r̶s̶e̶r̶.̶u̶r̶l̶e̶n̶c̶o̶d̶e̶d̶(̶{̶e̶x̶t̶e̶n̶d̶e̶d̶:̶ ̶t̶r̶u̶e̶}̶)̶)̶;̶
app.post('/upload', multipartMiddleware, (req, res) => {  
    res.json({
        'message': 'File uploaded succesfully.'
    });
});

内容是application/form-data，而不是application/json或application/x-www-form-urlencoded。

Answer 2

如果使用multer并使用$ http进行API调用，则将" content-type"标头明确设置为Multipart/form-data，您将获得" multer：boundary nover indound Indent Inder Indrol"错误"和如果删除"内容类型"标头或将其设置为false抛出 - "将圆形结构转换为JSON错误"。因此，我使用" fetch"来进行API调用，因为它自动识别了" content-type"。

UI代码(如下所示( -

$('#imgupload').unbind('change').on('change', function  (evt) {
    evt.stopPropagation();
    evt.preventDefault();
   let uploadedFiles = evt.target.files;

   let formData = new FormData();
   for(let i=0; i<uploadedFiles.length;i++){
    formData.append("uploads", uploadedFiles[i], uploadedFiles[i].name);
   }
   let url = '/upload';
   var req = {
    method: 'POST',
    body: formData
   }
   fetch(url,req).then(function(response) {
        console.log("the file has been uploaded to local server ",response);
        $scope.uploadToSftp();
   });

}(;

nodejs代码(如下所示( -

const multer = require('multer');
const storage = multer.diskStorage({
 destination: function (req, file, cb) {
   cb(null, './uploads/')
 },
 filename: function (req, file, cb) {
   cb(null, file.originalname)
 }
})
const multipartMiddleware  =  multer({ storage:  storage });
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({  
  extended: true
}));
app.post('/upload', multipartMiddleware.array("uploads",2), function(req, res) 
{
  console.log("the upload api is called");
  return res.send(req.files);
});