如何使用vaadin-upload调用Spring Boot实现的文件上传API？

实现方案 #

方案1：使用vaadin-upload自带上传能力（推荐，代码量最少） #

vaadin-upload默认就支持提交multipart/form-data请求，你只需要配置对应属性即可完全匹配你现有后端接口：

1. 修改file-upload.ts代码如下：

import {customElement} from 'lit/decorators.js';
import {html, LitElement} from 'lit';
import '@vaadin/vaadin-upload';
// 导入query装饰器获取组件实例
import {query} from 'lit/decorators/query.js';
import type { Upload } from '@vaadin/upload';

@customElement('file-upload')
export class FileUpload extends LitElement {
  // 获取vaadin-upload实例
  @query('vaadin-upload')
  uploadElement!: Upload;

  render() {
    return html`
      <!-- 配置上传目标地址，关闭自动上传，参数名默认就是file和后端匹配 -->
      <vaadin-upload
        target="http://localhost:8080/uploadFile"
        no-auto
        max-files="1"
      ></vaadin-upload>
      <vaadin-button @click="${this.upload}">upload</vaadin-button>
    `;
  }

  upload() {
    // 触发组件自带上传逻辑
    this.uploadElement.uploadFiles();
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'file-upload': FileUpload;
  }
}

2. 解决跨域问题：在Spring Boot的FileController类上添加跨域注解，允许前端域名访问：

// 替换为你前端实际运行的地址+端口，开发测试阶段可以暂时写*
@CrossOrigin(origins = "*")
@RestController
public class FileController {
    // 原有代码不变
}

配置完成后选择文件点击上传按钮即可完成提交，组件会自动处理请求封装、进度展示、错误提示等逻辑。

方案2：完全自定义上传逻辑 #

如果你需要额外控制请求过程，可以手动读取文件发送请求，修改upload方法如下：

async upload() {
  // 遍历组件中已选择的文件
  for (const file of this.uploadElement.files) {
    const formData = new FormData();
    // 对应后端参数名file
    formData.append('file', file);
    
    try {
      const response = await fetch('http://localhost:8080/uploadFile', {
        method: 'POST',
        body: formData
      });
      const result = await response.json();
      console.log('上传成功', result);
      // 上传完成后移除文件列表中的记录
      this.uploadElement.removeFile(file);
    } catch (err) {
      console.error('上传失败', err);
    }
  }
}

同样需要配置上述的后端跨域规则。

内容的提问来源于stack exchange，提问作者dede