【javaEE】(13)——本地文件存储头像上传

最新推荐文章于 2024-08-15 19:25:02 发布

拿来吧你小猫咪

最新推荐文章于 2024-08-15 19:25:02 发布

阅读量2k

点赞数 1

分类专栏： JAVAEE开发学习文章标签： java-ee 前端 vue.js

本文链接：https://blog.csdn.net/hanhandehanpi/article/details/121948255

版权

JAVAEE开发学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

现在文件存储的方式主要有以下几种

本地存储

前端上传文件，后端接收到将文件保存在本地，同时将路径保存到数据库，最后将路径返回给前端

文件不需要存到数据库中。

云存储

后端接收到前端的文件将文件存储到第三方的系统中（腾讯云之类）

优点：速度快,节约空间

FastDFS

自己搭建一套云存储方案

这里介绍的是第一种方式，在本地进行存储

搭建一个本地存储

前端vue：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script> 
		<!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
		<!-- Import style -->
		<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
		<!-- Import component library -->
		<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
		<style type="text/css">
			.div {
				background-color: aqua;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			 
			 <el-upload
			   class="upload-demo"
			   drag
			   :on-success="filesuccess"
			   <!-- 文件上传成功的 -->
			   action="http://127.0.0.1:8080/fileupload"
			   multiple>
			   <i class="el-icon-upload"></i>
			   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
			 </el-upload>
		</div>
	 
		<script>
			const App = {
				// 定义的变量
				data() {
					return {
						 
					}
				},
			 
				methods: {
					filesuccess(response,file,fileList){
						console.log("success")
						console.log(response)
					}
				}

			};
			Vue.createApp(App).use(ElementPlus).mount('#app');
		</script>
	</body>
</html>

后端代码：

package com.mybatis.mybatis.controller;

import com.mybatis.mybatis.utils.Result;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@CrossOrigin
@RestController
public class FileUploadController {
    @PostMapping("fileupload")
    public Result fileupload(MultipartFile file){
//        接收到了前端的请求
        System.out.println("file:"+file.getOriginalFilename());


//		 UUID生成随机数，起到重名保护作用
        String filename = UUID.randomUUID().toString()+file.getOriginalFilename();
        
//        将前端文件  保存到本地
        try {
            file.transferTo(new File("D:/D_ temporary/", filename));
        } catch (IOException e) {
            e.printStackTrace();
        }

//            将本地文件路径返回给前端
        return Result.ok(filename);
    }
}

解决静态资源访问问题：修改后端application.properties 根据自己spring版本号

#静态资源配置   spring版本2.3.7使用如下配置
spring.resources.static-locations=file:D:/D_ temporary/

#静态资源配置   spring版本2.5.5使用如下配置
spring.web.resources.static-locations=file:D:/D_ temporary/