【SpringBoot】三十九、SpringBoot上傳檔案至專案resources目錄下

當我們沒有搭建單獨的檔案服務器時，我們需要將檔案上傳至專案目錄下，今天我們就學習如何上傳檔案到專案的resources目錄下

一、引入依賴

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>
<dependency>
    <groupId>commons-net</groupId>
    <artifactId>commons-net</artifactId>
    <version>3.3</version>
</dependency>

檔案上傳，就會涉及到 IO 操作，我們需要引入以上依賴

二、組態檔

spring:
  # 上傳檔案
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

配置上傳檔案的最大值：

• spring.servlet.multipart.max-file-size，限制單個檔案的最大值
• spring.servlet.multipart.max-request-size，限制上傳的多個檔案的總大小

三、上傳工具類

package com.asurplus.common.utils;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.util.ResourceUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.net.InetAddress;
import java.util.UUID;

/**
 * 檔案上傳
 *
 * @author YangXiuTeng
 * @date Jun 1, 2015
 */
@Component
public class UploadFileUtil {

	/**
	* 專案埠
	*/
    @Value("${server.port}")
    public String port;

	/**
	* 專案路徑
	*/
    @Value("${server.servlet.context-path}")
    public String contextPath;

	/**
     * 上傳檔案
     * 
     * @param multipartFile 檔案物件
     * @param dir 上傳目錄
     * @return
     */
    public ResponseResult uploadFile(MultipartFile multipartFile, String dir) {
        try {
            if (multipartFile.isEmpty()) {
                return ResponseResult.error("請選擇檔案");
            }
            // 獲取檔案的名稱
            String originalFilename = multipartFile.getOriginalFilename();
            // 檔案后綴 例如：.png
            String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf("."));
            // uuid 生成檔案名
            String uuid = String.valueOf(UUID.randomUUID());
            // 根路徑，在 resources/static/upload
            String basePath = ResourceUtils.getURL("classpath:").getPath() + "static/upload/" + (StringUtils.isNotBlank(dir) ? (dir + "/") : "");
            // 新的檔案名，使用uuid生成檔案名
            String fileName = uuid + fileSuffix;
            // 創建新的檔案
            File fileExist = new File(basePath);
            // 檔案夾不存在，則新建
            if (!fileExist.exists()) {
                fileExist.mkdirs();
            }
            // 獲取檔案物件
            File file = new File(basePath, fileName);
            // 完成檔案的上傳
            multipartFile.transferTo(file);
            // 回傳絕對路徑
            return ResponseResult.success("上傳成功", "http://" + InetAddress.getLocalHost().getHostAddress() + ":" + port + contextPath + "/upload/" + fileName);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ResponseResult.error("上傳失敗");
    }
}

• 我們由于需要在工具類中獲取專案埠及背景關系路徑，所以我們使用注解 @Component
• 我們上傳的根目錄在：resources/static/upload
• 檔案名，我們使用了 uuid 作為新的檔案名，保證檔案不會被覆寫
• 我們回傳的路徑是絕對路徑，在實際的生成環境中，建議使用相對路徑
• ResponseResult 是我們自定義的統一回傳物件，表示成功還是失敗

四、上傳呼叫

• 1、注入上傳工具類

@Autowired
private UploadFileUtil uploadFileUtil;

• 2、上傳 API

/**
 * 上傳檔案
 * <p>
 * Ajax方式上傳檔案
 *
 * @return
 */
@PostMapping("uploadFileAjax")
@ResponseBody
public ResponseResult uploadFileAjax(HttpServletRequest request) {
    MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
    MultipartFile file = multiRequest.getFile("files");
    String dir = request.getHeader("Minio-dir");
    return uploadFileUtil.uploadFile(file, dir);
}

• 3、上傳呼叫

Html

<p>ajax提交</p>
<hr>
<div style="height: 200px;width: 200px;position: relative;border: 1px #e2e2e2 solid">
    <input type="file" accept="image/*" id="imgUpload" style="position: absolute;left: 0;top: 0;opacity: 0;filter: alpha(opacity=0);height: 100%;width: 100%;z-index: 99">
    <img src="" alt="" id="picImg" style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;">
</div>

JavaScript

$('#imgUpload').change(function () {
    var formData = new FormData();
    formData.append("files", $("#imgUpload")[0].files[0]);
    var index = layer.load();
    $.ajax({
        type : "POST",
        cache: false,
        dataType: "json",
        data : formData,
        processData :  false,
        contentType :  false,
        url: baseUrl + 'uploadFileAjax',
        success:function(res){
            layer.close(index);
            layer.msg(res.msg);
            if(200 == res.code){
                $('#picImg').attr('src',res.data);
            }
        },
        error:function() {
            layer.close(index);
            layer.msg("服務器例外！");
        }
    });
});

五、上傳測驗

點擊上傳

圖片上傳成功，轉到上傳目錄：

成功上傳至專案的 resources/static/upload/ 目錄下

如您在閱讀中發現不足，歡迎留言！！！