Question

我在使用Angular上传到我的后端时遇到问题。

这是我的component.html

<input type="file" (change)="fileChange($event)" placeholder="Upload file">

这是我的component.ts

fileChange(event) {
  let fileList: FileList = event.target.files;
  if(fileList.length > 0) {
    let file: File = fileList[0];
    let formData: FormData = new FormData();
    formData.append('file', file, file.name);
    console.log(formData);
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    const token = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
    this.http.post('http://localhost:3000/stretch/1' + token, formData, { headers: headers })
      .map(res => res.json())
      .catch(error => Observable.throw(error))
      .subscribe(
        data => console.log(data),
        error => console.log(error)
      );
  }
}

这是我使用NodeJS / express + Multer的后端

var upload = multer({ dest: 'uploads/' }).single('file');


router.post('/1', upload, function (req, res, next) {
    var decoded = jwt.decode(req.query.token);

    User.findById(decoded.user._id, function (err, user) {
        if (err) {
            return res.status(500).json({
                title: 'An error occurred',
                error: err,
            });
        }

        if (!req.file){
            return res.status(500).json({
                title: 'An error occurred',
                error: "No invoice document recieved"
            });
        }
    });
});

这就是我在控制台上获得的内容：

Screenshot of console

我不确定问题是什么或我错过了什么我觉得我几乎尝试了什么。

令我困惑的是，当我在console.log中使用formData时，即使我刚刚选择了一个文件，它看起来也是空的。这是正常的吗？

非常感谢您的帮助。

使用Angular上传文件到Multer

1 个答案: