java - 使用axios将带有嵌入文件的复杂对象从vuejs发送到java spring

Question

我尝试使用 java/spring back 和 vue/axios/typescript 前端设置一个简单的 cms 系统。目的是能够通过 vuejs 前端保存某种简单的网络文章（称为项目，无论出于何种原因，请看图）。项目是具有数据的对象，并包含其他对象的列表，称为 WebFile。这些 WebFiles 包含一个文件。

我已经在 java 和 typescript 中创建了关联的对象类，并且将基本字段发送到 java 控制器没有问题。这是我不知道如何发送的文件列表....

这是我到目前为止所拥有的（对象简化为不过度复杂化问题）：

java中的项目类

public class Item {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    
    private String title;
    
    private String description;

    @OneToMany
    private List<WebFile> webFileList; 
...

Java中的WebFile类：

public class WebFile {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;

    private String name;
    private String description

    private MultipartFile file; /*(don't really know what to put here)*/
...

ItemController（现在只打印它，我会在稍后完成其余的）：

@PostMapping(path = "/save")
@CrossOrigin
public Item save(@RequestBody Item object) {
    System.out.println(object);

    return null;
}

前端思路（整个代码很长，在不同的文件中）

save(item: Item) {
        return axios
            .post("http://localhost:8081/item/save", item)
            .then((response) => {
                console.log(response);
                return response.data;
            }); 
}

其中 Item 是一个打字稿类，相当于 java 类：

export class Item {
    id: number;
    name: string;
    description: string;
    webFileList: WebFile[];

带有 WebFile 列表，这是一个相当于 java 的 typescript 类，其中包含：

export class WebFile {
    id: number;
    name: string;
    description: string;
    file: File;

因此，当我从 java 中的 webFile 对象中删除 MultipartFile 文件时，它可以工作，我可以打印一个漂亮的“项目”，其中包含我保存在我的 Web 表单中的所有信息（项目的名称和描述，以及每个包含的 WebFile 的名称和描述.

但是尝试传递文件是行不通的。在我的 WebFile 类中尝试使用 MultipartFile 文件字段会引发“无法构造实例org.springframework.web.multipart.MultipartFile”错误

我浏览了一些关于 stackOverflow 的问题。一些使用@RequestParam，@ModelAttribute，@RequestPart...我尝试过使用formData，但无法正确...我还没有找到合适的答案，我设法为我的案例工作...

有人可以帮助我吗？如何管理文件？我做错了什么？

标签： javaspringtypescriptvue.jsaxios