SpringBoot上传图片到指定位置并返回URL的实现

 更新时间:2022年03月20日 09:07:10   作者:七旅之言  
本文主要介绍了SpringBoot上传图片到指定位置并返回URL,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下<BR>

想做一个上传图片的功能,来展示用户上传的图片。

在返回给前端的URL上弄了好久,前端一直无法访问到URL,结果一直显示404。 倒腾了一上午发现是 文件路径映射的问题,后端部分有讲解决办法,可供大家参考

需求

前端的图片上传到服务器指定的文件目录,并且将URL返回给前端

前端部分(ElementUI+Vue.js)

ElementUI的导入和使用:(组件 | Element)

Vue.js的导入和使用:(Vue.js (vuejs.org))

<template>
  <div class="form-group">
    <el-upload
        action="http://localhost:8081/upload"
        :on-preview="handlePreview"
        accept='.jpg'
        :limit="10"
    >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>

export default {
    name: "updateImg",
    methods:{
        handlePreview(file){
            window.open(file.response.url);
            console.log(file.response.url);
        }
    }
}
</script>

<style scoped>

</style>

效果:

后端部分(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 Map<String, Object> fileupload(MultipartFile file,HttpServletRequest req){
		
		Map<String,Object> 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java解析XML的四种方法详解

    Java解析XML的四种方法详解

    XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML。本文将详细介绍用Java解析XML的四种方法
    2012-10-10
  • 解决IDEA springboot

    解决IDEA springboot"spring-boot-maven-plugin"报红问题

    这篇文章主要介绍了解决IDEA springboot"spring-boot-maven-plugin"报红问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • mybatisplus 的SQL拦截器实现关联查询功能

    mybatisplus 的SQL拦截器实现关联查询功能

    大家都知道mybatisplus不支持关联查询,后来学习研究发现mybatisplus的SQL拦截器可以实现这一操作,下面小编给大家分享我的demo实现基本的关联查询功能没有问题,对mybatisplus关联查询相关知识感兴趣的朋友一起看看吧
    2021-06-06
  • Spring Cloud 整合 nacos实现动态配置中心的详细步骤

    Spring Cloud 整合 nacos实现动态配置中心的详细步骤

    这篇文章主要介绍了Spring Cloud 整合 nacos 实现动态配置中心,整合步骤是通过添加依赖新建nacos配置,本文分步骤通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • Java发送邮件遇到的常见需求汇总

    Java发送邮件遇到的常见需求汇总

    这篇文章主要介绍了Java发送邮件遇到的常见需求汇总的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Java实现学生管理系统

    Java实现学生管理系统

    这篇文章主要为大家详细介绍了Java实现学生管理系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 深入讲解Java 9中的九个新特性

    深入讲解Java 9中的九个新特性

    Java 8 发布三年多之后,即将快到2017年7月下一个版本发布的日期了。 你可能已经听说过 Java 9 的模块系统,但是这个新版本还有许多其它的更新。 这里有九个令人兴奋的新功能将与 Java 9 一起发布。需要的朋友可以参考学习,下面来一起看看吧。
    2017-05-05
  • java泛型中占位符T和?有什么区别

    java泛型中占位符T和?有什么区别

    泛型中占位符T和?有什么区别?有的人可能弄不清楚,本文主要介绍了java泛型中占位符T和?有什么区别,具有一定的参考价值,感兴趣的可以了解一下
    2022-05-05
  • 如何对Mysql数据表查询出来的结果进行排序

    如何对Mysql数据表查询出来的结果进行排序

    这篇文章主要介绍了如何对Mysql数据表查询出来的结果进行排序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08
  • 教你使用Java实现扫雷小游戏(最新完整版)

    教你使用Java实现扫雷小游戏(最新完整版)

    本文给大家介绍使用Java实现扫雷小游戏,本程序封装了五个类,分别是主类GameWin类,绘制底层地图和绘制顶层地图的类MapBottom类和MapTop类,绘制底层数字的类BottomNum类,以及初始化地雷的BottomRay类和工具GameUtil类,用于存静态参数和方法,感兴趣的朋友一起看看吧
    2022-05-05

最新评论