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ù)器中對應(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;
? ? }
}

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

前端寫法

這里分為兩種寫法，一種是常用的表單提交，另一種是當(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>

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

您可能感興趣的文章: