SpringBoot+Vue實現文件上傳+預覽

從鬆哥的微信公衆號上面看到了SpringBoot+Vue實現文件上傳+預覽的視頻教程，以下圖所示：

跟着作，使用IDEA一遍看一邊作，沒想到因爲本身馬虎將日期SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/yyyy/MM/dd/");寫成了SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/yyyy/MM/dd");致使後續拼接文件名出錯：

因爲在本地地址生成pdf文件失敗致使沒法實現預覽PDF文件的效果。
最後將日期格式修改後成功上傳而且能夠實現pdf文件預覽。

建立SpringBoot項目

pom.xml文件

使用IDEA建立一個基於SpringBoot的項目，依賴選擇Spring Web，個人pom.xml文件以下所示：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>org.javaboy</groupId>
    <artifactId>fileupload</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>fileupload</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

添加一個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<String, Object> fileUpload(MultipartFile file, HttpServletRequest req) { 
 
   
        Map<String, Object> 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安裝
對應的頁面內容以下圖所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-upload action="/upload" :on-preview="handlePreview" multiple :limit="10" accept=".pdf">
        <el-button size="small" type="primary">點擊上傳</el-button>
        <div slot="tip" class="el-upload__tip">只能上傳pdf文件，且不超過100MB</div>
    </el-upload>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script> new Vue({ 
     el: '#app', methods: { 
     handlePreview(file) { 
     console.log(file); window.open( file.response.url); } } }) </script>
</html>

這裏使用了Element-UI的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/

本文同步分享在 博客「雪域迷影」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。