ngFileUpload 和 Multer - 将上传的文件保存到文件夹

Question

我（非常）是 Angular MEAN 的新手，我正在尝试上传文件（特别是 pdf）并将其保存到服务器。我知道这可能是一个愚蠢的问题，但我在服务器上找不到任何关于如何将上传的文件实际保存到服务器存储的示例

我使用来自https://github.com/danialfarid/ng-file-upload 的 ng-file-upload 指令，Express 用于服务器，以及 ofc，AngularJS 用于文件上传。

发布更新！！见下文

更多信息：我正在为这个项目使用 Yeoman 的全均值堆栈生成器

更新： 我尝试使用 multer (https://github.com/expressjs/multer) 将上传的文件保存到服务器。尝试上传文件时出现此错误（返回 500 错误）

Error: Unexpected field
   at makeError ({proj_folder}/node_modules/multer/lib/make-error.js:12:13)
   at wrappedFileFilter ({proj_folder}/node_modules/multer/index.js:39:19)
   at Busboy.<anonymous> ({proj_folder}/node_modules/multer/lib/make-middleware.js:112:7)
   at emitMany (events.js:127:13)
   at Busboy.emit (events.js:201:7)
   at Busboy.emit ({proj_folder}/node_modules/busboy/lib/main.js:31:35)
   at PartStream.<anonymous> ({proj_folder}/node_modules/busboy/lib/types/multipart.js:213:13)
   at emitOne (events.js:96:13)
   at PartStream.emit (events.js:188:7)
   at HeaderParser.<anonymous> ({proj_folder}/node_modules/dicer/lib/Dicer.js:51:16)
   at emitOne (events.js:96:13)
   at HeaderParser.emit (events.js:188:7)
   at HeaderParser._finish ({proj_folder}/node_modules/dicer/lib/HeaderParser.js:68:8)
   at SBMH.<anonymous> ({proj_folder}/node_modules/dicer/lib/HeaderParser.js:40:12)
   at emitMany (events.js:127:13)
   at SBMH.emit (events.js:201:7) 

更新的 HTML

<form accept-charset="UTF-8" class="form" name="form" ng-submit="$ctrl.submitForm(form)" 
                enctype="multipart/form-data">
...
<input ngf-select ng-model="$ctrl.paperFile" ngf-model-options="{allowInvalid: true}" name="paper" ngf-accept="'application/pdf'" required="" type="file" >
...
</form>

submitForm方法

...
    this.Upload.upload({
            url:'/paperUpload',
            method: 'POST',
            file: this.paperFile,
            fields:{
              _id:this.user._id
            }
          })
          .then(function(resp){
             console.log('Success upload');
             console.log(resp.data);
          }, function(error){
            console.log('fail upload');
            console.log(error);
          }, function(evt){
            console.log('upload on progress');
            console.log(evt);
          });

服务器路由：

var express = require('express');
var multer = require('multer');
var router = express.Router();
var upload = multer({dest:'uploads/',
    rename: function(fieldname, filename){
        return filename+"_"+Date.now(); 
    }});
router.post('/paperUpload', upload.single('paper'), uploadPaper);

...

//method to upload
export function uploadPaper(req,res){
  res.status(204).end();
}

创建了“uploads”文件夹，但文件没有上传，总是返回失败

任何帮助表示赞赏， 谢谢

Answer 1

执行这些步骤

1. npm install ng-file-upload
2. 在您的角度索引 .html 中包含 ng-file-upload.min.js

3. 使用此示例将表单复制到您要上传文件的角度页面。 --http://jsfiddle.net/0m29o9k7/ 将此代码复制到任何已经存在的表单之外：

4. 将此 url 从示例代码更改为您要上传文件的位置 -- url: 'https://angular-file-upload-cors-srv.appspot.com/upload',

5. 在您用作（节点 server.js）启动应用程序的 server.js 或 app.js 中添加这些行

   var crypto = require('crypto'); var mime = 要求（'mime'）； var multer = require('multer');

   var storage = multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'app/app-content/images/')
     },
     filename: function (req, file, cb) {
       crypto.pseudoRandomBytes(16, function (err, raw) {
         cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype));
       });
     }
   });
   
   var upload = multer({ storage: storage });
   
   // make '/app' default route
   app.post('/', upload.any(), function (req, res) { 
       res.send(req.files);
   });
   

更改 'app/app-content/images/' 这是您希望上传文件的位置

此代码将您的文件上传网址指向您的节点服务器的索引。 然后你就可以看到上传的文件了。

Answer 2

试试这个，我从未见过 Upload.upload 的“文件”或“字段”选项。你知道那些在工作吗？我刚刚通过将 arrayField 添加到我的 POST 调用中克服了类似的错误。 如果您遇到相同的错误，请尝试删除“字段”并使用您希望传递的 _id 向数据对象添加一个新键。

this.Upload.upload({
            url:'/paperUpload',
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data ; boundary = ----WebKitFormBoundaryvlb7BC9EAvfLB2q5'
            },
            arrayKey: '',
            data: {
              paper: this.paperFile,
            },
            fields:{
              _id:this.user._id
            }
          })
          .then(function(resp){
             console.log('Success upload');
             console.log(resp.data);
          }, function(error){
            console.log('fail upload');
            console.log(error);
          }, function(evt){
            console.log('upload on progress');
            console.log(evt);
          });