json - 从 spring boot 以 angular 4 发布上传文件？

Question

我有一个 api 处理上传文件的请求(在 spring boot 中)，如下所示:

@PostMapping("/api/admin/product/{id}/upload")
public ResponseEntity<Product> postUpload(@PathVariable("id") Integer id, @RequestParam("image") MultipartFile imageFile) {
    Product product = productService.findOne(id);
    return new ResponseEntity<>(productService.upload(product, imageFile),HttpStatus.OK);
}

以下是处理我的请求的服务。我应该如何修复它以适应上述 api？

@Injectable()
export class ProductServiceService {
  private baseUrl = 'http://localhost:8080/api/admin/product';
  private headers = new Headers({'Content-Type' : 'multipart/form-data', 'Access-Control-Allow-Origin' : '*'});
  private options = new RequestOptions({headers: this.headers});
  constructor(private _http: Http) { }
  postUpload(id) {
    const formdata: FormData = new FormData();
formdata.append('image', image);
return this._http.post(this.baseUrl + '/' + id + '/upload', formdata, this.options)
            .map((res: Response) => res.json())
            .catch(this.errorHandler);
  }
  errorHandler(error: Response) {
    return Observable.throw(error || 'SERVER ERROR');
  }
}

这是构建后的错误 谢谢!

Answer 1

根据您分享的代码，我的一些观察:

• private headers = new Headers({'Content-Type' : 'application/json'}); .这是错误的，内容类型应该是 multipart/form-data
• this._http.get - 这应该是 POST
• 文件应由 image 关联请求参数

我对 Angular 不熟悉，无法给你一个准确的答案。

更新:

如果您的客户端应用程序是另一个 Spring Boot 应用程序，那么您可以在 Angular JS 应用程序上运行 Zuul 代理并映射 /api网址 http://localhost:8080/api .启用 Zuul 代理非常简单* 添加对 spring-cloud-starter-zuul 的依赖在你的 pom* 用 @EnableZuulProxy 注释配置类* 在属性中添加以下内容:zuul.routes.api.url http://localhost:8080/api

因此，从您的客户端应用程序调用 API:http://localhost:4200/api/admin/product/17/upload你的客户端应用程序(使用 Zuul 代理)将调用 http://localhost:8080/api/admin/product/17/upload在服务器上。