携带参数的表单文件上传 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; }

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

页面完整代码

 
 
 上传文件 
                                 选择文件         
 取消 确定 
   
import {ref} from \"vue\";import {uploadFile} from \"../network/http.js\";let tableData = ref([]);let dialogVisible = ref(false);let bookForm = ref({ bookName: \"\", author: \"\", file: \"\",})const handleChange = (file) => { bookForm.value.file = file.raw;}const uploadFileClick = () => { dialogVisible.value = true;}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);}