Node.js 服务器未收到来自 Angular 站点的上传请求（使用 express-fileupload）答案

【问题标题】：Node.js server not receiving upload request from angular site (using express-fileupload)Node.js 服务器未收到来自 Angular 站点的上传请求（使用 express-fileupload）
【发布时间】：2017-10-23 14:16:24
【问题描述】：

我创建了一个 node.js 网络服务器，它使用 express-fileupload 来接收多部分/表单数据上传，我似乎无法正确处理，这是我的节点部分：

app.post('/uploadImage', function(req, res) {
console.log("uploadImage");
if (!req.files)
  return res.status(400).send('No files were uploaded.');

let uploadedFile = req.files.uploadedFile;

if(uploadedFile.mimetype.indexOf("image") > -1){
  // Use the mv() method to place the file somewhere on your server
  uploadedFile.mv('./' + uploadedFile.name, function(err) {
    if (err)
      return res.sendStatus(500);

    res.json({result: "uploaded successfully!"});
    });
  }
});

HTML：

<form id="uploadForm">
      <div class="row" style="margin-left: 0; margin-right: 0">
        <div class="text-center">
          <img [src]="imgPath" class="img-responsive text-center" style="max-height: 75px"/>
          <input id="artUpload" type="file" class="btn-success text-center" name="uploaded_file.png"/>
          <button class="btn btn-primary" (click)="upload()">Upload</button>
        </div>
      </div>
    </form>

和打字稿：

upload(){
let formData: FormData;
formData = new FormData(<HTMLFormElement>document.getElementById('uploadForm'));
let input: HTMLInputElement = <HTMLInputElement>document.getElementById('artUpload');
formData.set('uploadedimage', input.files.item(0),'uploadedimage.png');
server.sendForm(formdata);
}

传递给 server.sendForm 方法的对象不包含任何文件。 'uploadedimage' 键在控制台登录时也不会显示。如果您使用 express-fileupload npm 站点上提供的库存 html，则此方法有效。

【问题讨论】：

标签： node.js angular

【解决方案1】：

没有使用express-fileupload，我直接使用了connect-busboy：

前端

html template

<div>

  <form>

    <div class="form-group"><label for="upload">Fichier</label>
      <input id="upload" type="file" (change)="changeListener($event)"/>
    </div>

  </form>
</div>

component.ts

changeListener($event): void {
    console.log('change listener');
    this.readThis($event.target);
  }

readThis(inputValue: any): void {

    const file: File = inputValue.files[0];
    this.filename = file.name;
    const fileExtension: string = this.filename.substr((this.filename.lastIndexOf('.') + 1)); // read the extension of the file
    this.appService.deployement(file);
  }

service angular

deployement(file: File) {
    console.log('service angular');
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);
    const headers = new Headers();
    headers.append('Content-Type', 'multipart/*');
    // headers.append('Accept', 'application/json');
    this.http.post(URL_API_REST + 'upload', formData, headers)
      .toPromise()
      .then(res => res.json())
  }

服务器端

app.js

var fs = require('fs');
var busboy = require('connect-busboy');
...
app.post('/upload', function(req, res) {

    console.log("upload");

    if (req.method === 'GET')
        return res.json({'status': 'GET not allowed'});

    var fstream;
    req.pipe(req.busboy);
    req.busboy.on('file', function (fieldname, file, filename) {
        console.log("Uploading: " + filename);
        fstream = fs.createWriteStream(__dirname + '/files/' + filename);
        file.pipe(fstream);
        fstream.on('close', function () {
            res.sendStatus(200);
        });
    });

});

只需要确保你在你的应用程序的服务端创建了一个目录files，否则你在运行服务端时会报错。

【讨论】：