SpringBoot實現簡單檔案上傳功能

2022-08-15 10:02:07

通過 SpringBoot 實現了表單下的檔案上傳，前後端分離情況下的檔案上傳。本案例不連線資料庫，只做基本的檔案上傳操作。

在 SpringBoot 中不需要額外匯入其他依賴，正常引入即可。

後端 controller 的寫法

package com.dailyblue.java.controller;
 
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
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;
 
@RestController
@RequestMapping("/upload")
public class UploadController {
 
    @PostMapping
    public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {
        // file:上傳檔案
        // 獲取到 images 的具體路徑
        // String realPath = request.getRealPath("images");
        String realPath = ResourceUtils.getURL("classpath:").getPath() + "/static/images";
        System.out.println("上傳的檔案地址是：" + realPath);
        // 伺服器中對應的位置
        // 產生唯一的檔名稱
        String fileName = UUID.getUUid();
        // 獲取到檔案字尾
        String fileType = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        File src = new File(realPath, fileName + fileType);
        // 將file檔案傳遞到src去
        file.transferTo(src);
        return "images/" + fileName + fileType;
    }
}

這裡只做了簡單的檔案上傳，沒有限制檔案型別。

前端寫法

這裡分為兩種寫法，一種是常用的表單提交，另一種是當下較火的 Vue 上傳方式。

表單寫法

<form action="upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <button>上傳</button>
</form>

Vue 寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <img :src="'http://localhost:8081/'+img" v-show="flag"/>
    <input type="file" @change="changeImg"/>
    <button @click="upload">Vue 上傳</button>
</div>
</body>
</html>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            file: null,
            img: '',
            flag: false
        },
        methods: {
            changeImg(event) {
                this.file = event.target.files[0];
            },
            upload() {
                // 表單資料
                let data = new FormData();
                data.append('file', this.file);
                // 定義傳送格式
                let type = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('http://localhost:8081/upload', data, type)
                    .then((response) => {
                        this.img = response.data;
                        this.flag = true;
                    });
            }
        }
    });
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

SpringBoot實現簡單檔案上傳功能

熱門文章