Agular2 +打字稿+文件上传

Question

我正在创建一个angular2项目,我的要求是上传文件并从客户端向服务器(Spring Rest Server)发送一些参数.我尝试过Formdata接口,但是当我将一个文件(从event.srcElement.files创建的文件对象)附加到它然后将对象记录到控制台时,它会打印一个空的formdata对象.至于服务器端,我正在使用@requestparam("file")来获取文件.如果有人可以提供一些帮助,那就太好了.

这是我的html文件中的代码

<input type="file" #uploadFile multiple="true" (change)="uploadFile($event)"/>

组件文件是这样的

  uploadFile(event:any){
    let file = event.target.files[0];
    let fileName = file.name;
    console.log(file)
    console.log(fileName)
    let formData = new FormData();
    formData.append('file',file);
    this.examService.uploadAnswer(formData);
}

并在服务文件中

uploadAnswer(formData:FormData){  
            console.log(formData)
            this.http.post(this.url+'/uploadanswer', formData)
            .map((response: Response) => {
                let res = response.json();
            Object.keys(res).forEach(name =>
                this.questions=res[name]
            );
            });

Answer 1

你的HTML应该是:

<input id="file-field" name="file-field" (change)="uploadFile($event)" type="file" accept=".png,.jpg,.jpeg">

因此,您将获得组件中的文件:

uploadFile(event) {
  let files = event.target.files;
  if (files.length > 0) {
    console.log(file); // You will see the file
    this.service.uploadFile(file);
  }
}

在服务中:

uploadFile(file) {
  let formData: FormData = new FormData();
  formData.append('file', file, file.name);

  this.http.post(url, formData, request_options)
}

然后,您将在请求数据中使用文件密钥获取文件.