Question

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

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

POST UPDATED !!见下文

更多信息：我正在使用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

执行以下步骤

npm install ng-file-upload
在角度指数.html
使用此示例将表单复制到您想要上传文件的角度页面。 - http://jsfiddle.net/0m29o9k7/ 将此代码复制到任何已存在的表单之外：
将此网址从示例代码更改为您要上传文件的位置 - 网址：'https://angular-file-upload-cors-srv.appspot.com/upload'，

在您使用的server.js或app.js（node server.js）中启动应用程序添加这些行

var crypto = require（'crypto'）; var mime = require（'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 /'您希望上传文件的位置

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

Answer 2

试试这个，我从未见过＆＃39;文件＆＃39;或者＆＃39;字段＆＃39; Upload.upload的选项。你知道那些工作吗？我只是通过将arrayField添加到我的POST调用来克服类似的错误。如果您遇到同样的错误，请尝试删除＆＃39;字段＆＃39;并使用您希望传递的_id向数据对象添加新密钥。

＆＃13;

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);
          });

＆＃13;

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

2 个答案: