SpringBoot+Vue3實(shí)現(xiàn)上傳文件功能
前言
開發(fā)后臺系統(tǒng)時經(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ù)上傳時間重新命名合同
// 根據(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工具類（方法詳解）這篇文章。
定義方法時，需傳入?yún)?shù)，參數(shù)類型MultipartFile，我在這里加入判斷文件是否為空的操作，可自行修改。
file.getOriginalFilename(); 獲取文件的名稱originalFilename.substring(0, originalFilename.indexOf(“.”)); 截取前綴originalFilename.substring(originalFilename.lastIndexOf(“.”)); 獲取后綴，及文件類型fileName + “-” + DateUtil.getCurrentDatePath() + suffixName; 根據(jù)上傳時間重新命名文件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;配置好便可直接使用，也可以直接在控制器中定義！為了方便前段時間是否上傳成功，將文件名稱傳入Map集合返回前端，即：
Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", newFileName);大體流程如上，后端完成！
注 ：此處上傳文件有個缺陷，就是選擇文件之后立刻上傳指定位置，如果在實(shí)際應(yīng)用中發(fā)現(xiàn)文件上傳錯了，重新選擇時前文件已在指定文件夾，沒有覆蓋，個人感覺無傷大雅，但是在前端的回顯文件名稱時會覆蓋新文件名稱。
補(bǔ)充：上面代碼中在拼接新文件名稱時有DateUtil.getCurrentDatePath()方法，是我封裝的日期工具類獲取當(dāng)前時間，有興趣可以自己研究下，這里不過多贅述，代碼貼在下方。或者重命名可以隨便根據(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;
}上傳成功時，右側(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ì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購物車計(jì)算總價功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了深入解析Vue 組件命名那些事，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue中項(xiàng)目頁面空白但不報(bào)錯產(chǎn)生的原因及分析
這篇文章主要介紹了vue中項(xiàng)目頁面空白但不報(bào)錯產(chǎn)生的原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關(guān)于分離vue文件中css、js代碼的簡單技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
Vue 電商后臺管理項(xiàng)目階段性總結(jié)(推薦)
這篇文章主要介紹了Vue 電商后臺管理項(xiàng)目階段性總結(jié)，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了vue中按鈕操作完刷新頁面的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vant list組件滾動保留滾動條位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue中Axios配置不同的baseURL,請求不同的域名接口方式
這篇文章主要介紹了Vue中Axios配置不同的baseURL,請求不同的域名接口方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07