快捷導(dǎo)航

SpringBoot實(shí)現(xiàn)簡(jiǎn)單文件上傳功能

更新時(shí)間：2022年08月15日 08:44:29 作者：Dailyblue

這篇文章主要為大家詳細(xì)介紹了SpringBoot實(shí)現(xiàn)簡(jiǎn)單文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

通過 SpringBoot 實(shí)現(xiàn)了表單下的文件上傳，前后端分離情況下的文件上傳。本案例不連接數(shù)據(jù)庫，只做基本的文件上傳操作。

在 SpringBoot 中不需要額外導(dǎo)入其他依賴，正常引入即可。

后端 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);
? ? ? ? // 服務(wù)器中對(duì)應(yīng)的位置
? ? ? ? // 產(chǎn)生唯一的文件名稱
? ? ? ? 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;
? ? }
}

這里只做了簡(jiǎn)單的文件上傳，沒有限制文件類型。

前端寫法

這里分為兩種寫法，一種是常用的表單提交，另一種是當(dāng)下較火的 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() {
? ? ? ? ? ? ? ? // 表單數(shù)據(jù)
? ? ? ? ? ? ? ? let data = new FormData();
? ? ? ? ? ? ? ? data.append('file', this.file);
? ? ? ? ? ? ? ? // 定義發(fā)送格式
? ? ? ? ? ? ? ? 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: