angular +springboot 实现文件上传

Angular

1.html选择文件

首先写用户点击上传文件的按钮,按自己需要编写，下面只是一个简单的例子

    文件*
    
    

      
         选择文件
      
    
  

用户选择文件后触发onFileSelected($event)方法，将文件传入c层的方法

2.c层获取文件

onFileSelected(event) {
    const file: File = event.target.files[0];
    if (file) {
      this.file = file;
    }
  }

此时将用户上传的file存在变量file中

文件上传

如果不需要显示进度直接用post方法传输即可

constructor(private httpClient: HttpClient) { }

public saveFile(file:File): Observable {
    formData = new FormData();
    formData.append('file', this.file);
    return this.httpClient.post(`/file`, formData);
  }

要用formdata传file

需要显示进度

const req = new HttpRequest('POST', '/file', formData, {  
  reportProgress: true  
  });  
  
  // 产生一个 event 流  
  return this.http.request(req).subscribe((event: HttpEvent<{}>) => {  
  if (event.type === HttpEventType.UploadProgress) {  
   if (event.total > 0) {  
  // 计算上传的百分比  
  const percent = event.loaded / event.total * 100;  
 } }  });

到此为止，angular的工作就完成了

springboot

使用MultipartFile接口接收文件

@PostMapping("file")
    public String saveFile(@RequestParam("file") MultipartFile file) throws IOException {
        return this.myFileService.saveFile(file);
    }

接收文件之后文件的存储就比较简单了

@Override
    public String saveFile(MultipartFile file) throws IOException {

       String newFileName = UUID.randomUUID().toString()+file.getOriginalFilename();
        File newFile = new File(rootPath+newFileName);
        //定义向数据库中存取的文件路径
        if(!newFile.getParentFile().exists()){
            newFile.getParentFile().mkdirs();
        }
        file.transferTo(newFile);
        // return file.getOriginalFilename();
        return newFileName;
    }

定义好存储的路径和名称存储就行了，文件名这里用的是UUID，避免重复，关于UUID想要了解请自行查找，注意文件名要加上后缀

注意：如果网站使用了nginx，nginx对传输文件的大小有限制，关于如何修改参考下面文章
nginx修改上传文件大小限制

图片上传与回显

上传与文件上传相同
回显使用通过URL.createObjectURL(file)这种方式会生成一个访问本地图片的一个地址

onFileSelected(event) {
    const file: File = event.target.files[0];
    if (file) {
      this.canSubmit = false;
      const formData = new FormData();
      formData.append('thumbnail', file);
      this.picture = file;
      let imgUrl = window.URL.createObjectURL(file);
      this.sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);
    }
  }