首页 > 解决方案 > Angular 5通过formdat上传多张图片

问题描述

因为我使用 angular5 作为 Spring Boot 的前端和后端......当我通过表单数据上传文件时......并且 formData 变空了......

这是示例代码

  onFileChanged(event: any) {
    this.files = event.target.files;
    console.log(this.files)
  }
  
  onUpload() {
    const formData = new FormData;
    for (let file of this.files) {
      console.log('gdsgsfsd')
        formData.append('hihi', file.name);
    }
    console.log('gdsgsfsd',formData)
  }
<input id="file-input" type="file" (change)="onFileChanged($event)" multiple >

标签: angularspring-boot

解决方案


在 append 方法中添加文件对象作为第二个参数。

onUpload() {
    const formData = new FormData;
    for (let file of this.files) {
        console.log('gdsgsfsd')
        formData.append('hihi', file, file.name);
    }
    console.log('gdsgsfsd', formData);
}

推荐阅读