我想使用 vaadin-upload 调用文件上传 API

Question

我正在尝试使用“vaadin-upload”实现文件上传功能。我有一个使用 Spring 引导实现的本地构建的文件上传服务器，我想使用它的 API 来上传文件。我想使用这个 API 上传从“vaadin-upload”输入的文件。

API规格是这样的。

[URL] http://localhost:8080/uploadFile
[HEADER] 内容类型：multipart/form-data
[requestparam] 文件：多部分文件

“vaadin-upload”的 API 参考没有告诉我如何执行 API。我不知道如何运行 API。请告诉我。

index.html

<!DOCTYPE html>

<html lang="ja">
<meta charset="utf-8"/>
<title>sample</title>
<script type="module" src="./out/api-sample/file-upload.js"></script>

<file-upload></file-upload>

文件-upload.ts

import {customElement} from 'lit/decorators.js';
import {html, LitElement} from 'lit';
import '@vaadin/vaadin-upload';

@customElement('file-upload')
export class FileUpload extends LitElement {
  render() {
    return html`
      <vaadin-upload></vaadin-upload>
      <vaadin-button @click="${this.upload}">upload</vaadin-button>
    `;
  }

  upload() {
    // ???
  }
}

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

FileController.java

package com.example.demo.controller;

import com.example.demo.date.UploadFileResponse;
import com.example.demo.service.FileStorageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.support.ServletUriComponentsBuilder;

@RestController
public class FileController {

    private final FileStorageService fileStorageService;

    @Autowired
    public FileController(FileStorageService fileStorageService) {
        this.fileStorageService = fileStorageService;
    }

    @PostMapping("/uploadFile")
    public UploadFileResponse uploadFile(@RequestParam("file") MultipartFile file) {
        String fileName = fileStorageService.storeFile(file);

        String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
                .path("/downloadFile/")
                .path(fileName)
                .toUriString();

        return new UploadFileResponse(fileName, fileDownloadUri, file.getContentType(), file.getSize());
    }

}

Answer 1

您可以通过在上传组件上设置相应的属性来配置上传请求，例如：

<vaadin-upload 
  target="http://localhost:8080/uploadFile"
  headers='{"Content-Type": "multipart/form-data"}'
  form-data-name="file"
></vaadin-upload>

不能 100% 确定 form-data-name，但查看组件的源代码应该可以满足您的要求。

上传已包含一个按钮，因此您无需添加自己的按钮来触发上传。如果您出于某种原因仍想以编程方式触发上传，您可以使用 Upload.uploadFiles.

参考：Upload documentation, Upload API docs

我想使用 vaadin-upload 调用文件上传 API

I want to call the file upload API using vaadin-upload

vaadin

lit