SpringBoot+Vue实现文件上传+预览

从松哥的微信公众号上面看到了SpringBoot+Vue实现文件上传+预览的视频教程，如下图所示：

SpringBoot+Vue实现文件上传示例

跟着做，使用IDEA一遍看一边做，没想到由于自己马虎将日期SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/yyyy/MM/dd/");写成了SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/yyyy/MM/dd");导致后续拼接文件名出错：

error

由于在本地地址生成pdf文件失败导致无法实现预览PDF文件的效果。
最后将日期格式修改后成功上传并且可以实现pdf文件预览。

result1

result2

创建SpringBoot项目

pom.xml文件

使用IDEA创建一个基于SpringBoot的项目，依赖选择Spring Web，我的pom.xml文件如下所示：

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.3.3.RELEASE
         
    
    org.javaboy
    fileupload
    0.0.1-SNAPSHOT
    fileupload
    Demo project for Spring Boot

    
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

添加一个FileUploadController.java控制器类

package org.javaboy.fileupload;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
public class FileUploadController {

    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/yyyy/MM/dd/");

    @PostMapping("/upload")
    public Map fileUpload(MultipartFile file, HttpServletRequest req) {
        Map resultMap = new HashMap<>();

        // 得到上传时的文件名
        String originName = file.getOriginalFilename();
        if (!originName.endsWith(".pdf")) {
            resultMap.put("status", "error");
            resultMap.put("msg", "文件类型不对，必须为pdf");

            return resultMap;
        }

        String strFormat = simpleDateFormat.format(new Date());
        String realPath = req.getServletContext().getRealPath("/") + strFormat;
        String uploadDir = req.getSession().getServletContext().getRealPath("/") + "/upload/" + strFormat;

        File folder = new File(realPath);
        if (!folder.exists()) {
            folder.mkdirs();
        }

        // 保存文件对象，加上uuid是为了防止文件重名
        String strNewFileName = UUID.randomUUID().toString().replaceAll("-", "") + ".pdf";
        try {
            file.transferTo(new File(folder, strNewFileName));
            String strUrl = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + strFormat + strNewFileName;
            resultMap.put("status", "success");
            resultMap.put("url", strUrl);
        } catch (IOException e) {
            e.printStackTrace();

            resultMap.put("status", "error");
            resultMap.put("msg", e.getMessage());
        }

        return resultMap;
    }
}

index.html

为了简单直接在resources/static目录下创建index.html，并且引入vue.js和elment-ui,具体可以参考Element-UI安装
对应的页面内容如下图所示：

    
    
    



    
        点击上传
        
只能上传pdf文件，且不超过100MB
    

这里使用了Element-UI的el-upload组件，如下所示：

el-upload

需要注意的问题

SpringBoot上传文件的大小限制

SpringBoot对于上传的文件大小有限制，所以需要在application.properties文件中增加几个配置，如下：

#配置文件传输
spring.servlet.multipart.enabled =true
spring.servlet.multipart.file-size-threshold =0
#设置单个文件上传的数据大小
spring.servlet.multipart.max-file-size = 100MB
#设置总上传的数据大小
spring.servlet.multipart.max-request-size=100MB

我这里设置单文件上传的最大大小为100MB和总共文件的大小为100MB

最终源代码下载

相关代码我已经上传至我的Github和Gitee码云仓库上面了，需要的话可自行获取

• Github-fileupload
• Gitee-fileupload

从github上面克隆fileupload项目

git clone https://github.com/ccf19881030/fileupload.git

从码云上获取fileupload项目

git clone https://gitee.com/havealex/fileupload.git

参考资料

• SpringBoot+Vue实现文件上传+预览-松哥的视频教程
• 源代码下载
  • https://github.com/ccf19881030/fileupload
  • https://gitee.com/havealex/fileupload
• spring boot 2 上传文件大小限制的配置不生效解决方式
• Spring Boot 实战系列视频教程，配套案例
• el-upload
• Element-UI的安装和使用
• Vue.js指南
• 松哥 江南一点雨的相关博客
  • CSDN
  • 博客园
  • Github
  • 码云
  • B站
  • http://www.javaboy.org/
  • http://www.itboyhub.com/
  • http://springboot.javaboy.org/