SpringBoot+Vue3 realiza la carga de archivos

prefacio

Al desarrollar el sistema en segundo plano, a menudo me encuentro con la función de cargar archivos. Este es mi método.

---

Backend: SpringBoot2
Frontend: Vue3+ElementPlus
Herramienta: IDEA

---

1. Back-end

/**
     * 上传采购合同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;// 根据上传时间重新命名合同
            // 根据定义的位置存入合同
            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;
    }

Aquí se usa la clase de herramienta MultipartFile para cargar archivos usando SpringMVC. Los métodos de interfaz específicos de la clase de herramienta solo se muestran aquí para un uso simple. Si está interesado, puede consultar el artículo Clase de herramienta MultipartFile (explicación detallada del método ) .
Al definir un método, se deben pasar los parámetros, y el tipo de parámetro es MultipartFile.Aquí agrego la operación de juzgar si el archivo está vacío, que puede modificar usted mismo.

1. file.getOriginalFilename(); Obtiene el nombre del archivo
2. originalFilename.substring(0, originalFilename.indexOf(“.”)); prefijo de intercepción
3. originalFilename.substring(originalFilename.lastIndexOf(“.”)); Obtenga el sufijo y el tipo de archivo
4. fileName + "-" + DateUtil.getCurrentDatePath() + suffixName; Cambiar el nombre del archivo de acuerdo con el tiempo de carga
5. FileUtils.copyInputStreamToFile(archivo.getInputStream(), nuevo archivo(contractPdfFilePath+ newFileName)); depositar el contrato según la ubicación definida

El contractPdfFilePath aquí es una ubicación predefinida, lo configuro globalmente en el archivo application.yml y luego lo introduzco en el controlador, de la siguiente manera:

aplicación.yml:

contractPdfFilePath: E://2023GraduationDesign/uploadFile/AssetPurchaseContract/

Controlador:

@Value("${contractPdfFilePath}")
private String contractPdfFilePath;

¡Se puede usar directamente después de la configuración o se puede definir directamente en el controlador! Para facilitar si la carga se realizó correctamente hace algún tiempo, el nombre del archivo se pasa a la colección de mapas y se devuelve al front-end, a saber:

Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", newFileName);

¡El proceso general es como el anterior, y el back-end está completo!

Nota : hay un defecto al cargar archivos aquí, que consiste en cargar la ubicación especificada inmediatamente después de seleccionar el archivo. Si se descubre que el archivo se cargó incorrectamente en la aplicación real, el archivo ya está en la carpeta especificada cuando se re- seleccionando, y no hay sobrescritura.Personalmente, es inofensivo, pero en El nuevo nombre de archivo se sobrescribe cuando la interfaz hace eco del nombre de archivo.

Suplemento : el código anterior tiene el método DateUtil.getCurrentDatePath() cuando se empalma el nuevo nombre de archivo. Es la clase de herramienta de fecha que encapsulé para obtener la hora actual. Si está interesado, puede estudiarlo usted mismo. No iré en detalles aquí, y el código se pega a continuación. O el cambio de nombre se puede diseñar de acuerdo con sus propias preferencias, o no necesita cambiar el nombre.

package com.project.util;

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

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

	/**
	 * 日期对象转字符串
	 * @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;
	}
	
	/**
	 * 字符串转日期对象
	 * @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();
		}
	}
}

---

Dos, la parte delantera

<!-- 上传合同 -->
        <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>

Aquí: getServerUrl() en acción es el método axios encapsulado por sí mismo, lo que significa http://localhost:8082/. Puedes escribir directamente.

1. URL de empalme: getServerUrl()+'asset/uploadContract'
2. handleContractSuccess: método para el éxito de la carga personalizada

método handleContractSuccess:

const fileName = ref("只允许上传PDF文件")
const handleContractSuccess = (res) => {
    
    
  fileName.value = res.data.title;
  form.value.cght = res.data.title;
}

Cuando la carga es exitosa, " Permitir solo la carga de archivos PDF " en el lado derecho se reemplaza con el nombre del archivo, y el nombre del archivo se pasa al atributo definido para cargarlo en la base de datos.

3. Demostración

Puede ver que el archivo se cargó correctamente, se cargó en la ubicación especificada y se renombró correctamente en el formulario

¡El proceso es como el anterior, y la parte delantera está completa!

---

Finalizar

Lo anterior es todo el contenido, ¡bienvenido a discutir, registrar el aprendizaje!