首页 > 解决方案 > Angular 5 - 文件上传不起作用

问题描述

编辑:固定。我不得不将此添加到我的回复中:

.subscribe(data =>{
  console.log('data is here: ', data);
});

我已经阅读了关于这个的一大堆文章,但无法让它发挥作用。

环境:Angular 5,带有 Express 的 NodeJS 后端。使用 Express-FileUpload 上传文件。

我用这个简单的 HTML 尝试了我的 API:

<html>
  <body>
    <form ref='uploadForm' 
      id='uploadForm' 
      action='http://192.168.1.20:8275/api/upload' 
      method='post' 
      encType="multipart/form-data">
        <input type="file" name="sampleFile" />
        <input type='submit' value='Upload!' />
    </form>     
  </body>
</html>

认为我的 API 工作正常,API 端点接收来自 HTML 的请求就好了。现在,这就是我正在尝试做的 Angular:

let body = new FormData();
  body.append("file", file, 'thefilename');
  let options: RequestOptions = new RequestOptions();
  options.headers = new Headers();
let response: Observable<Response> = this.http.post('http://192.168.1.20:8275/api/upload', body, options); //code just breaks here and exists silently

response.map(json =>{
  console.log('gotcha')
}),err =>{
  console.log('error: ', err);
};

角代码不起作用。POST 调用后,它会中断并静默退出。控制台中没有任何内容,没有错误。我无法弄清楚为什么?我通读了文章,发现我们不必提供内容类型来使其工作。我也试过了,但没有运气。可能是什么问题?

标签: node.jsangularexpressfile-upload

解决方案


推荐阅读