springboot实现图片上传功能,springboot访问本地图片

需求

前端的图片上传到服务器指定的文件目录，并且将统一资源定位器返回给前端

前端部分（ElementUI+Vue.js）

元素用户界面的导入和使用：(组件元素)

　　vue。英语字母表中第十个字母的导入和使用：(Vue.js (vuejs.org))

　　模板div class= form-group El-upload action= http://localhost :8081/upload : on-preview= handle preview accept= .jpg : limit= 10 El-button size= small type= primary 点击上传/El-button div slot= tip class= El-upload _ _ tip 只能上传jpg/png文件，且不超过500 kb/div/El-upload/div/template脚本导出默认{ name : update img ，methods : { handle preview(file){ window。打开(文件。回应。网址)；控制台。日志(文件。回应。网址)；} } }/脚本样式范围/风格效果：

后端部分（SpringBoot）

1.先配置application.yml文件

文件保存路径：要保存图片的位置早上遇到404问题是因为在配置文件保存路径时候没有在最后的形象后加上导致路径无法匹配到

　　服务器：端口： 8081文件保存路径：d : 软件 spring工具套件 WorkPlace hello world src main resources static images spring : MVC :视图：前缀：/后缀：jsp

2.映射资源-重写WebMvcConfigurer接口，实现对资源的映射

包com。等等。配置；导入org。spring框架。豆子。工厂。注释。价值；导入org。spring框架。语境。注释。配置；导入组织。spring框架。网络。servlet。配置。注释。resourcehandlerregistry导入org。spring框架。网络。servlet。配置。注释。webmvc配置器；@配置公共类配置文件实现webmvc configurer { @ Value( $ { file-save-path } )私有字符串file save path @ override public void addResourceHandlers(ResourceHandlerRegistry registry){ registry。addresourcehandler(/images/* * ).addResourceLocations( file : 文件保存路径)；//系统。出去。println( file : 文件保存路径)；} } addResourceHandler(/images/* * )表示凡事以/图片/路径发起请求的，按照addResourceLocations( file : 文件保存路径)的路径进行映射

　　例如有一个网址：http://localhost :8081/images/hello。使用jpeg文件交换格式存储的编码图像文件扩展名

　　表示要对Hello.jpg进行请求访问，这时候服务器会把这个请求的资源映射到我们配置的路径之下也就是会到文件保存路径下去寻找是否有Hello.jpg这个资源，返回给前端页面。

3.Controller代码

这边为了方便使用地图进行返回，实际开发中使用封装好的类型进行返回

　　封装com等。控制器；导入Java。io。文件；导入Java。io。io异常；导入Java。文字。简单的日期格式；导入Java。util。日期；导入Java。util。hashmap导入Java。util。地图；导入Java。util。uuid导入javax。servlet。http。http servlet请求；导入javax。声音。迷笛。sysexmessage导入org。spring框架。豆子。工厂。注释。价值；导入org。spring框架。网络。绑定。注释。交叉起源；导入org。spring框架。网络。绑定。注释。后期映射；导入org。spring框架。网络。绑定。注释。休息控制器；导入org。spring框架。网络。多部分。多部分文件；@ cross origin @ RestControllerpublic class ImgUploadController { simpledate format SDF=new simpledate format(/yyyy .mm . DD/)；@Value(${file-save-path} )私有字符串file save path @ post mapping(/upload )public MapString，Object file upload(multipart file file，http servlet request req){ MapString，Object result=new HashMap()；//获取文件的名字字符串来源名称=文件。getoriginalfilename()；系统。出去。println(原点名称：原点名称)；//判断文件类型如果(!originName.endsWith( .jpg ){结果。put( status ， error )；result.put(msg ，文件类型不对);返回结果；}//给上传的文件新建目录字符串格式=SDF。format(new Date())；String realPath=fileSavePath格式；系统。出去。println( realPath : realPath)；//若目录不存在则创建目录文件夹=新文件(realPath)；如果(!文件夹。exists()){文件夹。mkdirs()；}//给上传文件取新的名字，避免重名String newName=UUID.randomUUID().toString() .jpg ；尝试{//生成文件，文件夹为文件目录，新名称为文件名file.transferTo(新文件(文件夹，新名称));//生成返回给前端的urlString URL=req。get scheme() :// req。get servername() : 请求。获取serverport()/images 格式的newName系统。出去。println( URL : URL)；//返回URLresult.put(status ， success )；result.put(url ，网址);}catch (IOException e) {//TODO自动生成捕捉块result . put(“status”、“error”)；result.put(msg ，e . getmessage())；}返回结果；}}到此这篇关于跳羚上传图片到指定位置并返回统一资源定位器的实现的文章就介绍到这了，更多相关跳羚上传图片并返回统一资源定位器内容请搜索盛行信息技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持盛行它!

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

需求

前端部分（ElementUI+Vue.js）

后端部分（SpringBoot）

1.先配置application.yml文件

2.映射资源-重写WebMvcConfigurer接口，实现对资源的映射

3.Controller代码

相关文章阅读