Question

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

这是我的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)
}

然后，您将在请求数据中使用文件密钥输入文件。

Agular2 +打字稿+文件上传

1 个答案: