使用 typescript (angular2) 和 spring boot (spring data) 将图像插入数据库

Question

我首先向我的客户端展示服务

    addImage (url: string, params: string[], files: File[]): Observable {
                return Observable.create(observer => {
                    let formData: FormData = new FormData(),
                        xhr: XMLHttpRequest = new XMLHttpRequest();

                    for (let i = 0; i < files.length; i++) {
                        formData.append("uploads[]", files[i], file

s[i].name);
                }

                xhr.onreadystatechange = () => {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            observer.next(JSON.parse(xhr.response));
                            observer.complete();
                        } else {
                            observer.error(xhr.response);
                        }
                    }
                };

                xhr.upload.onprogress = (event) => {
                    this.progress = Math.round(event.loaded / event.total * 100);

                    this.progressObserver.next(this.progress);
                };

                xhr.open('POST', url, true);
                xhr.send(formData);
            });

    }

那么这是我的html代码

<input type="file" (change)="uploadImage($event)"/>

我从我的组件中调用这个方法的地方

uploadImage(event) {
        var files = event.srcElement.files;
        console.log(files);
        this._serviceSection.addImage('http://localhost:8080/template/img', [], files).subscribe(() => {
            console.log('sent');
        });
    }

在我的服务端

这是来自我的控制器的方法

@RequestMapping(value = "/img", method = RequestMethod.POST)
    public void getFileContents(@RequestParam MultipartFile file) {
        System.out.println("++++++++++++++++++++++++++++++++++++++++ " +file.getOriginalFilename());
    }

第一次尝试显示文件名，但出现此错误

Answer 1

您的progressObserver 似乎没有设置。原因可能是您没有订阅其关联的 observable。不要忘记 observables 是惰性的，如果你不订阅它们，它们的初始化回调不会被调用。

为防止出现错误，您可以检查它是否为空：

xhr.upload.onprogress = (event) => {
  if (this.progressObserver) {
    this.progress = Math.round(event.loaded / event.total * 100);

    this.progressObserver.next(this.progress);
  }
};

否则，您会注意到，从 RC2 开始，Angular2 接受 FormData 对象作为 HTTP 方法的参数...