欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot+Vue3實(shí)現(xiàn)上傳文件功能

 更新時(shí)間：2023年01月28日 09:56:17   作者：Amazing_time  
這篇文章主要介紹了SpringBoot+Vue3實(shí)現(xiàn)上傳文件功能，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

開發(fā)后臺(tái)系統(tǒng)時(shí)經(jīng)常遇到實(shí)現(xiàn)上傳文件的功能，在這記錄一下我的方法

后端：SpringBoot2
前端：Vue3+ElementPlus
工具：IDEA

一、后端

/**
     * 上傳采購(gòu)合同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("上傳采購(gòu)合同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工具類，該工具類具體接口方法，此處只演示簡(jiǎn)單的使用，有興趣可以查看 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í)會(huì)覆蓋新文件名稱。

補(bǔ)充：上面代碼中在拼接新文件名稱時(shí)有DateUtil.getCurrentDatePath()方法，是我封裝的日期工具類獲取當(dāng)前時(shí)間，有興趣可以自己研究下，這里不過多贅述，代碼貼在下方。或者重命名可以隨便根據(jù)自己的喜好設(shè)計(jì)，也可以不用重命名。

package com.project.util;

import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * 日期工具類
 */
public class DateUtil {

	/**
	 * 日期對(duì)象轉(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)日期對(duì)象
	 * @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">添加采購(gòu)合同</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/?？梢灾苯訉?。

  • 拼接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ù)庫(kù)。

三、演示

可以看到文件上傳成功，上傳到指定位置并且重命名在表單成功顯示

流程如上，前端完成！

到此這篇關(guān)于SpringBoot+Vue3實(shí)現(xiàn)上傳文件的文章就介紹到這了,更多相關(guān)vue3 springboot 文件上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論