使用Angular 4上传zip文件到Spring Rest控制器

Question

我想从Angular 4上传.zip文件到服务器（Spring Rest Controller），请建议如何操作？

谢谢。

- Atul

Answer 1

经过一些学习，我已经找到了如何从Angular（4/5）上传文件（.zip / .txt /任何其他文件格式）到Spring / REST控制器的答案。 以下是我为了帮助那些寻找同样内容的人而记录下来的学习过程：）

前端编码：

1. HTML（例如UploadFile.component.html）：

<input type="file" formControlName="uploadFile" (change)="uploadFileToServer($event)"/>

2. 组件（例如：UploadFile.component.ts）：

import { Component } from '@angular/core';
import { RequestOptions, Headers, Http } from '@angular/http';
@Component({
  selector: 'file-uploader',
  templateUrl: './uploadFile.component.html',
  styleUrls: ['./uploadFile.component.css'],
})
export class FileUploadComponent {

public uploadFileToServer(event) {
  let fileList: FileList = event.target.files;
  if (fileList.length > 0) {
    let file: File = fileList[0];
    let formData: FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    formData.append('fileType', 'zip');
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    this.http.post('domain/urservice', formData, options)
      .map(res => res.json())
      .catch(error => Observable.throw(error))
      .subscribe(
      data => console.log('success'),
      error => console.log(error)
      )
  }
} 

}

(Note - 此服务器通信调用应该存在于某个服务中，而不是组件中，但为了简单起见，我在组件中编写了它) 服务器端编码::

1. Spring / Rest控制器（FileUploadController.java）：

    @RequestMapping(value = "/urservice", method = RequestMethod.POST)
    public void uploadFile(MultipartHttpServletRequest request) throws IOException {

    Iterator<String> itr = request.getFileNames();

    // directory to save file
    String tempDir = System.getProperty("jboss.server.temp.dir");

      MultipartFile file = request.getFile(itr.next());
      String fileType = request.getParameter("fileType");
      String fileName = file.getOriginalFilename();

      File dir = new File(tempDir);
      File fileToImport = null;
      if (dir.isDirectory()) {

        try {
            fileToImport = new File(dir + File.separator + fileName);
            BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(fileToImport));
            stream.write(file.getBytes());
            stream.close();
        } catch (Exception e) {
            logger.error("Got error in uploading file.");
        }

}

- Atul

Answer 2

1) 请查看这里： https://angular.io/guide/http#making-a-post-request

因此，您可以构建一个服务，当您在表单中按下提交按钮时触发该服务，并将文件（无论是zip、img还是其他）附加到POST请求中。

2) 在您的模板中，您可以使用类似以下内容：

<form>
  <input type="file" accept=".zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed">
  <input type="submit">
</form>

3) 在这里查看如何强制文件扩展名： https://www.hongkiat.com/blog/css3-attribute-selector/

- Mac_W

---

非常感谢，回答很有帮助。 - Atul