使用FormData上傳二進(jìn)制文件、對象、對象數(shù)組方式
FormData上傳 MultipartFile文件; 通過表單上傳MultipartFile文件與對象;FormData上傳對象列表
一、FormData上傳 MultipartFile文件
使用element的 el-upload組件上傳文件。
前端使用FormData 傳輸二進(jìn)制文件
<template> <div id="app"> <!-- formData的主要用處 1. 網(wǎng)絡(luò)請求中處理表單數(shù)據(jù) 2. 網(wǎng)絡(luò)請求中處理用來異步的上傳文件 --> <div class="upload"> <el-upload class="upload-demo" drag action="#" :multiple="false" :auto-upload="false" :on-change="onChange" :on-remove="onRemove" :file-list="fileList" > <i class="el-icon-upload" /> <div class="el-upload__text">將文件拖到此處,或<em>點(diǎn)擊上傳</em></div> <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過500kb</div> </el-upload> <el-button size="medium" @click="upload">上傳</el-button> </div> </div> </template> <script> import UploadApi from '@/api/upload.js' export default { name: 'FormData', data() { return { fileList: [] } }, methods: { onChange(file, fileList) { this.fileList = [] this.fileList.push(file.raw) }, onRemove() { this.fileList = [] }, upload() { const formData = new FormData() formData.append('file', this.fileList[0]) // 請求服務(wù)端接口 UploadApi.formData(formData).then(res => { this.$message.success(res) }).catch(err => { this.$message.error(err) }) } } } </script>
后端服務(wù)器接收
@PostMapping("/formData") public void useFormData(@RequestParam("file") MultipartFile file){ System.out.println(file.getName()); System.out.println(file.getBytes()); System.out.println(file.getInputStream()); }
二、 上傳 MultipartFile文件和 數(shù)據(jù)
前端仍然通過append方法添加數(shù)據(jù)
upload() { const formData = new FormData() formData.append('file', this.fileList[0]) formData.append('time', 20220730) // 請求服務(wù)端接口 UploadApi.formData(formData).then(res => { this.$message.success(res) }).catch(err => { this.$message.error(err) }) }
后端添加@RequestBody 及實(shí)體類對象接收
@Data public class Upload { private long time; }
@PostMapping("/formData") public boolean useFormData(@RequestBody @RequestParam("file") MultipartFile file, Upload upload){ System.out.println(file.getName()); System.out.println(file.getBytes()); System.out.println(file.getInputStream()); System.out.println(upload.getTime()); }
三、上傳表單數(shù)據(jù)中包含對象
前端append 方法添加數(shù)據(jù)
upload() { const formData = new FormData() formData.append('file', this.fileList[0]) formData.append('time', 20220730) formData.append('bean.year', 2022) formData.append('bean.month', 7) formData.append('bean.day', 30) // 請求服務(wù)端接口 UploadApi.formData(formData).then(res => { this.$message.success(res) }).catch(err => { this.$message.error(err) }) }
后端服務(wù)器添加接收對象
@Data public class Upload { private long time; private DayBean bean; } @Data public class DayBean { private int year; private int month; private int day; }
@PostMapping("/formData") public boolean useFormData(@RequestBody @RequestParam("file") MultipartFile file, Upload upload){ System.out.println(file.getName()); System.out.println(file.getBytes()); System.out.println(file.getInputStream()); System.out.println(upload.getTime()); DayBean bean = upload.getBean(); System.out.println("year:" + bean.getYear() + ", month:" + bean.getMonth() + ", day:" + bean.getDay()); }
四、上傳對象列表
前端需要循環(huán)添加數(shù)據(jù)
upload() { const formData = new FormData() formData.append('file', this.fileList[0]) formData.append('time', 20220730) for (var i = 0; i < 3; i++) { formData.append('bean[' + i + '].year', 2022 + i) formData.append('bean[' + i + '].month', 7 + i) formData.append('bean[' + i + '].day', 30 + i) } // 請求服務(wù)端接口 UploadApi.formData(formData).then(res => { this.$message.success(res) }).catch(err => { this.$message.error(err) }) }
后端服務(wù)器使用對象列表接收
@Data public class Upload { private long time; private List<DayBean> bean; }
@PostMapping("/formData") public void useFormData(@RequestBody @RequestParam("file") MultipartFile file, Upload upload){ System.out.println(file.getName()); System.out.println(file.getBytes()); System.out.println(file.getInputStream()); System.out.println(upload.getTime()); List<DayBean> beanList = upload.getBean(); for (DayBean bean : beanList) { System.out.println("year:" + bean.getYear() + ", month:" + bean.getMonth() + ", day:" + bean.getDay()); } }
其他
設(shè)置multipart上傳大小
@Configuration public class MultipartThemeConfig { @Bean public MultipartConfigElement multipartConfig(){ MultipartConfigFactory factory = new MultipartConfigFactory(); //單個(gè)文件大小200MB,單位KB,MB factory.setMaxFileSize(DataSize.parse("5MB")); //單個(gè)文件大小200MB,單位KB,MB factory.setMaxRequestSize(DataSize.parse("10MB")); return factory.createMultipartConfig(); } }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決SpringBoot application.yaml文件配置schema 無法執(zhí)行sql問題
這篇文章主要介紹了解決SpringBoot application.yaml文件配置schema 無法執(zhí)行sql問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-08-08springboot 自定義異常并捕獲異常返給前端的實(shí)現(xiàn)代碼
在開發(fā)中,如果用try catch的方式,每個(gè)方法都需要單獨(dú)實(shí)現(xiàn),為了方便分類異常,返回給前端,采用了@ControllerAdvice注解和繼承了RuntimeException的方式來實(shí)現(xiàn),具體實(shí)現(xiàn)內(nèi)容跟隨小編一起看看吧2021-11-11jetbrain?fleet對標(biāo)vscode實(shí)際操作
Gradle是一個(gè)基于Apache Ant和Apache Maven概念項(xiàng)目自動(dòng)化構(gòu)建開源工具,jetbrain家的fleet(已獲得預(yù)覽權(quán)限)直接對標(biāo)vscode?,?fleet有望超過vscode嗎?今天我們實(shí)際操作下2021-12-12Java異常處理運(yùn)行時(shí)異常(RuntimeException)詳解及實(shí)例
這篇文章主要介紹了 Java異常處理運(yùn)行時(shí)異常(RuntimeException)詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下http://time.qq.com/?pgv_ref=aiotime2017-05-05Spring Security實(shí)現(xiàn)驗(yàn)證碼登錄功能
這篇文章主要介紹了Spring Security實(shí)現(xiàn)驗(yàn)證碼登錄功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01詳解SpringBoot中實(shí)現(xiàn)依賴注入功能
這篇文章主要介紹了詳解SpringBoot中實(shí)現(xiàn)依賴注入功能,SpringBoot的實(shí)現(xiàn)方式基本都是通過注解實(shí)現(xiàn)的。有興趣的可以了解一下。2017-04-04如何在Spring?Boot中使用MyBatis訪問數(shù)據(jù)庫
MyBatis可以通過簡單的XML或者注解來配置和映射原始類型,接口,和Java POJO為數(shù)據(jù)庫中記錄,使用MyBatis幫助我們解決各種問題,本文介紹如何在Spring?Boot中使用MyBatis訪問數(shù)據(jù)庫,感興趣的朋友一起看看吧2023-11-11SpringBoot+JSON+AJAX+ECharts+Fiddler實(shí)現(xiàn)前后端分離開發(fā)可視化
這篇文章主要介紹了SpringBoot+JSON+AJAX+ECharts+Fiddler實(shí)現(xiàn)前后端分離開發(fā)可視化,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06