使用 angular 4 将 zip 文件上传到 spring rest 控制器

Question

我想将 .zip 文件从 angular 上传到服务器（spring rest controller）4。请建议如何操作？

提前致谢

Answer 1

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/

Answer 2

经过一些学习，我找到了如何将文件（.zip/.txt/任何其他文件格式）从 angular (4/5) 上传到 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)
      )
  }
} 

}

（注意 - 此服务器通信调用应该出现在某些服务中而不是组件中，但为简单起见，我将其写在组件中）

服务器端编码::

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.");
        }

}

使用 angular 4 将 zip 文件上传到 spring rest 控制器

Upload zip file to spring rest controller using angular 4

multipartform-data

spring-rest

angular

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

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

1。 Spring/Rest 控制器 (FileUploadController.java) :