【javaEE】(13)

您所在的位置：网站首页 › java接收前端文件保存到项目中怎么操作 › 【javaEE】(13)

【javaEE】(13)

2024-07-10 06:28| 来源: 网络整理| 查看: 265

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

本地存储

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

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

云存储

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

优点：速度快,节约空间

FastDFS

自己搭建一套云存储方案

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

前端vue：

.div { background-color: aqua; width: 100px; height: 100px; } action="http://127.0.0.1:8080/fileupload" multiple 将文件拖到此处，或点击上传只能上传jpg/png文件，且不超过500kb const App = { // 定义的变量 data() { return { } }, methods: { filesuccess(response,file,fileList){ console.log("success") console.log(response) } } }; Vue.createApp(App).use(ElementPlus).mount('#app');

后端代码：

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/ 前端代码解析 JavaEE Mybatis-plus进阶用法 6

最后注意一点，这个组件上传的文件不能超过500kb，格式也限制为jpg/png，要可以去找其他模块满足更大的需求。

可以访问以下官网寻找更多的组件

https://element.eleme.cn/#/zh-CN/component/upload

脚手架如何引入Element-Plus

文档地址：https://element.eleme.cn/#/zh-CN/component/tag

进入控制台（cmd输入vue ui），点击插件，添加插件

安装红框所示的插件

修改main.js即可

JavaEE Mybatis-plus进阶用法 9

【本文地址】

【javaEE】(13)

【javaEE】(13)

今日新闻

推荐新闻