SpringBoot上传图片到指定位置并返回URL的实现
目录
需求前端部分(ElementUI+Vue.js)后端部分(SpringBoot)1.先配置application.yml文件2.映射资源-重写WebMvcConfigurer接口,实现对资源的映射3.Controller代码想做一个上传图片的功能,来展示用户上传的图片。
在返回给前端的URL上弄了好久,前端一直无法访问到URL,结果一直显示404。 倒腾了一上午发现是 文件路径映射的问题,后端部分有讲解决办法,可供大家参考
需求
前端的图片上传到服务器指定的文件目录,并且将URL返回给前端
前端部分(ElementUI+Vue.js)
ElementUI的导入和使用:(组件 | Element)
Vue.js的导入和使用:(Vue.js (vuejs.org))
<script> export default { name: "updateImg", methods:{ handlePreview(file){ window.open(file.response.url); console.log(file.response.url); } } } </script>点击上传 只能上传jpg/png文件,且不超过500kb
效果:
后端部分(SpringBoot)
1.先配置application.yml文件
file-save-path:要保存图片的位置 早上遇到404问题是因为 在 配置file-save-path时候 没有在最后的 images后加上 ‘\’ 导致路径无法匹配到
server: port: 8081 file-save-path: D:\SoftWare\SpringToolSuite\WorkPlace\HelloWorld\src\main\resources\static\images\ spring: mvc: view: prefix: / suffix: .jsp
2.映射资源-重写WebMvcConfigurer接口,实现对资源的映射
package com.etc.config; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer{ @Value("${file-save-path}") private String fileSavePath; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/images/**").addResourceLocations("file:"+fileSavePath); //System.out.println("file:"+fileSavePath); } }
addResourceHandler("/images/**")表示凡事以 /images/ 路径发起请求的,按照 addResourceLocations("file:"+fileSavePath)的路径进行映射
例如有一个url:http://localhost:8081/images/Hello.jpg
表示要对Hello.jpg进行请求访问,这时候服务器会把这个请求的资源映射到我们配置的路径之下 也就是会到 fileSavePath 下去寻找 是否有 Hello.jpg 这个资源,返回给前端页面。
3.Controller代码
这边为了方便使用Map进行返回,实际开发中使用封装好的类型进行返回
package com.etc.controller; import java.io.File; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.UUID; import javax.servlet.http.HttpServletRequest; import javax.sound.midi.SysexMessage; import org.springframework.beans.factory.annotation.Value; 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; @CrossOrigin @RestController public class ImgUploadController { SimpleDateFormat sdf = new SimpleDateFormat("/yyyy.MM.dd/"); @Value("${file-save-path}") private String fileSavePath; @PostMapping("/upload") public Mapfileupload(MultipartFile file,HttpServletRequest req){ Map result = new HashMap<>(); //获取文件的名字 String originName = file.getOriginalFilename(); System.out.println("originName:"+originName); //判断文件类型 if(!originName.endsWith(".jpg")) { result.put("status","error"); result.put("msg", "文件类型不对"); return result; } //给上传的文件新建目录 String format = sdf.format(new Date()); String realPath = fileSavePath + format; System.out.println("realPath:"+realPath); //若目录不存在则创建目录 File folder = new File(realPath); if(! folder.exists()) { folder.mkdirs(); } //给上传文件取新的名字,避免重名 String newName = UUID.randomUUID().toString() + ".jpg"; try { //生成文件,folder为文件目录,newName为文件名 file.transferTo(new File(folder,newName)); //生成返回给前端的url String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() +"/images"+ format + newName; System.out.println("url:"+url); //返回URL result.put("status", "success"); result.put("url", url); }catch (IOException e) { // TODO Auto-generated catch block result.put("status", "error"); result.put("msg",e.getMessage()); } return result; } }
到此这篇关于SpringBoot上传图片到指定位置并返回URL的实现的文章就介绍到这了,更多相关SpringBoot上传图片并返回URL内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
X 关闭
X 关闭
- 15G资费不大降!三大运营商谁提供的5G网速最快?中国信通院给出答案
- 2联想拯救者Y70发布最新预告:售价2970元起 迄今最便宜的骁龙8+旗舰
- 3亚马逊开始大规模推广掌纹支付技术 顾客可使用“挥手付”结账
- 4现代和起亚上半年出口20万辆新能源汽车同比增长30.6%
- 5如何让居民5分钟使用到各种设施?沙特“线性城市”来了
- 6AMD实现连续8个季度的增长 季度营收首次突破60亿美元利润更是翻倍
- 7转转集团发布2022年二季度手机行情报告:二手市场“飘香”
- 8充电宝100Wh等于多少毫安?铁路旅客禁止、限制携带和托运物品目录
- 9好消息!京东与腾讯续签三年战略合作协议 加强技术创新与供应链服务
- 10名创优品拟通过香港IPO全球发售4100万股 全球发售所得款项有什么用处?