SpringBoot+Vue3實(shí)現(xiàn)上傳文件功能
前言
開發(fā)后臺系統(tǒng)時(shí)經(jīng)常遇到實(shí)現(xiàn)上傳文件的功能,在這記錄一下我的方法
后端:SpringBoot2
前端:Vue3+ElementPlus
工具:IDEA
一、后端
/**
* 上傳采購合同PDF
*
* @author Leo高洋
* @create 2023-01-20 6:51
*/
@PostMapping("/uploadContract")
public Map<String, Object> uploadContract(MultipartFile file) throws Exception {
Map<String, Object> resultMap = new HashMap<>();
if (!file.isEmpty()) {
logger.info("上傳采購合同PDF");
String originalFilename = file.getOriginalFilename();// 獲取文件名稱
String fileName = originalFilename.substring(0, originalFilename.indexOf("."));// 獲取前綴
String suffixName = originalFilename.substring(originalFilename.lastIndexOf("."));// 獲取后綴
String newFileName = fileName + "-" + DateUtil.getCurrentDatePath() + suffixName;// 根據(jù)上傳時(shí)間重新命名合同
// 根據(jù)定義的位置存入合同
FileUtils.copyInputStreamToFile(file.getInputStream(), new File(contractPdfFilePath + newFileName));
resultMap.put("code", 0);
resultMap.put("msg", "上傳成功");
Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", newFileName);
resultMap.put("data", dataMap);
}
return resultMap;
}此處使用SpringMVC上傳文件的MultipartFile工具類,該工具類具體接口方法,此處只演示簡單的使用,有興趣可以查看 MultipartFile工具類(方法詳解)這篇文章。
定義方法時(shí),需傳入?yún)?shù),參數(shù)類型MultipartFile,我在這里加入判斷文件是否為空的操作,可自行修改。
file.getOriginalFilename(); 獲取文件的名稱originalFilename.substring(0, originalFilename.indexOf(“.”)); 截取前綴originalFilename.substring(originalFilename.lastIndexOf(“.”)); 獲取后綴,及文件類型fileName + “-” + DateUtil.getCurrentDatePath() + suffixName; 根據(jù)上傳時(shí)間重新命名文件FileUtils.copyInputStreamToFile(file.getInputStream(), new File(contractPdfFilePath + newFileName)); 根據(jù)定義的位置存入合同
此處的 contractPdfFilePath 為提前定義好的位置,我是在application.yml文件中全局配置,然后在控制器中引入,如下:
application.yml:
contractPdfFilePath: E://2023GraduationDesign/uploadFile/AssetPurchaseContract/
Controller:
@Value("${contractPdfFilePath}")
private String contractPdfFilePath;配置好便可直接使用,也可以直接在控制器中定義!為了方便前段時(shí)間是否上傳成功,將文件名稱傳入Map集合返回前端,即:
Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", newFileName);大體流程如上,后端完成!
注 :此處上傳文件有個(gè)缺陷,就是選擇文件之后立刻上傳指定位置,如果在實(shí)際應(yīng)用中發(fā)現(xiàn)文件上傳錯(cuò)了,重新選擇時(shí)前文件已在指定文件夾,沒有覆蓋,個(gè)人感覺無傷大雅,但是在前端的回顯文件名稱時(shí)會覆蓋新文件名稱。
補(bǔ)充:上面代碼中在拼接新文件名稱時(shí)有DateUtil.getCurrentDatePath()方法,是我封裝的日期工具類獲取當(dāng)前時(shí)間,有興趣可以自己研究下,這里不過多贅述,代碼貼在下方?;蛘咧孛梢噪S便根據(jù)自己的喜好設(shè)計(jì),也可以不用重命名。
package com.project.util;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
* 日期工具類
*/
public class DateUtil {
/**
* 日期對象轉(zhuǎn)字符串
* @param date
* @param format
* @return
*/
public static String formatDate(Date date,String format){
String result="";
SimpleDateFormat sdf=new SimpleDateFormat(format);
if(date!=null){
result=sdf.format(date);
}
return result;
}
/**
* 字符串轉(zhuǎn)日期對象
* @param str
* @param format
* @return
* @throws Exception
*/
public static Date formatString(String str,String format) throws Exception{
if(StringUtil.isEmpty(str)){
return null;
}
SimpleDateFormat sdf=new SimpleDateFormat(format);
return sdf.parse(str);
}
public static String getCurrentDateStr(){
Date date=new Date();
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddhhmmssSSSSSSSSS");
return sdf.format(date);
}
public static String getCurrentDatePath()throws Exception{
Date date=new Date();
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMdd");
return sdf.format(date);
}
public static void main(String[] args) {
try {
System.out.println(getCurrentDateStr());
} catch (Exception e) {
e.printStackTrace();
}
}
}二、前端

<!-- 上傳合同 -->
<el-form-item label="上傳合同" prop="cght">
<el-upload
class="upload-demo"
:herders="headers"
:action="getServerUrl()+'asset/uploadContract'"
:limit="1"
:show-file-list="false"
:on-success="handleContractSuccess"
>
<el-row>
<el-button type="primary">添加采購合同</el-button>
<span style="font-size: 13px;color: #8d8d8d;margin-left: 15px">{{ fileName }}</span>
</el-row>
</el-upload>
</el-form-item>這里面:action中的getServerUrl()為自己封裝的axios方法,表示http://localhost:8082/??梢灾苯訉憽?/p>
- 拼接url:getServerUrl()+‘asset/uploadContract’
- handleContractSuccess:自定義上傳成功的方法
handleContractSuccess方法:
const fileName = ref("只允許上傳PDF文件")
const handleContractSuccess = (res) => {
fileName.value = res.data.title;
form.value.cght = res.data.title;
}上傳成功時(shí),右側(cè) “只允許上傳PDF文件” 替換為文件名稱,并且將文件名稱傳入定義的屬性中,上傳數(shù)據(jù)庫。
三、演示



可以看到文件上傳成功,上傳到指定位置并且重命名在表單成功顯示
流程如上,前端完成!
到此這篇關(guān)于SpringBoot+Vue3實(shí)現(xiàn)上傳文件的文章就介紹到這了,更多相關(guān)vue3 springboot 文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12
Vue實(shí)現(xiàn)購物車計(jì)算總價(jià)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購物車計(jì)算總價(jià)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
vue中項(xiàng)目頁面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析
這篇文章主要介紹了vue中項(xiàng)目頁面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
Vue 電商后臺管理項(xiàng)目階段性總結(jié)(推薦)
這篇文章主要介紹了Vue 電商后臺管理項(xiàng)目階段性總結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
vant list組件滾動(dòng)保留滾動(dòng)條位置
這篇文章主要介紹了vant list組件滾動(dòng)保留滾動(dòng)條位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
Vue中Axios配置不同的baseURL,請求不同的域名接口方式
這篇文章主要介紹了Vue中Axios配置不同的baseURL,請求不同的域名接口方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07

