Angular

1.html抉择文件

首先写用户点击上传文件的按钮,按本人须要编写，上面只是一个简略的例子

<div class=" row p-3">    <label class="col-3 text-right col-form-label" >文件<code>*</code></label>    <input style="display: none"  type="file" class="file-input"           (change)="onFileSelected($event)" #fileUpload>    <div class="file-upload  col">      <button type="button" (click)="fileUpload.click()" class="upload-btn btn-sm btn-success">        <i class="fas fa-file-image"></i> 抉择文件      </button>    </div>  </div>

用户抉择文件后触发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<string> {    formData = new FormData();    formData.append('file', this.file);    return this.httpClient.post<string>(`/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)这种形式会生成一个拜访本地图片的一个地址

<div class="col">      <img [src]="sanitizerUrl" class="web-img"></div>
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);    }  }