【SpringBoot】39、SpringBoot上传文件至项目resources目录下

全栈程序员站长

发布于 2022-07-01 18:08:16

2.4K0

发布于 2022-07-01 18:08:16

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

当我们没有搭建单独的文件服务器时，我们需要将文件上传至项目目录下，今天我们就学习如何上传文件到项目的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("服务器异常！");
        }
    });
});