携带参数的表单文件上传 axios, SpringBoot

 页面上的表单如上图, 点击确定按钮需要把参数统一传给后端.

前端代码:

表单的提交方法

const submit = async () => {
  const formData = new FormData();
  formData.append("bookName", bookForm.value.bookName);
  formData.append("author", bookForm.value.author);
  formData.append("file", bookForm.value.file);
  const res = await uploadFile("/book/saveBook", formData);
}

封装的 uploadFile方法

export function uploadFile(url, formData) {
    return new Promise((resolve, reject) => {
        axios.post(url, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(response => {
            resolve(response)
        }).catch(error => {
            console.log("上传失败", error);
        })
    });
}

后端接口:

    @PostMapping("/saveBook")
    public ResponseResult saveBook(@ModelAttribute BookBean book) {

        System.out.println(book.getBookName() + "---" + book.getAuthor());
        System.out.println(book.getFile());
        MultipartFile file = book.getFile();
        long size = file.getSize();
        System.out.println(size);
        FileStoreInfo fileStoreInfo = fileManageService.uploadFile(file);
        System.out.println(fileStoreInfo);

        return success(null);
    }

    @Data
    public class BookBean {
        private String bookName;
        private String author;
        private MultipartFile file;
    }

===================================

页面完整代码