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

Question

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

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>

和 typescript :

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 站点上给出的stock html，则此方法有效。

Answer 1

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

前端

html 模板

<div>

  <form>

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

  </form>
</div>

组件.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);
  }

服务 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，否则运行服务器时会出现错误。