SpringBoot vue图片上传需要重启服务才能显示

最开始项目是放在eclipse之中的、springboot项目默认把静态的文件加载到classpath的目录下的。而此时我们上传的图片并没有传入启动了的项目当中去、所以明明路径是对的、却访问不了、在项目重新启动之后项目会打成新的jar包、这个时候上一次上传的图片才会正常显示。

解决方法:配置静态资源路径访问。配置虚拟路径。

后端上传文件代码:

@RequestMapping("/upload")
	public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
		if (file.isEmpty()) {
			throw new EIException("上传文件不能为空");
		}
		String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
		File upload = new File("D:/work/");
		if(!upload.exists()) {
		    upload.mkdirs();
		}
		String fileName = new Date().getTime()+"."+fileExt;
		File dest = new File(upload+"/"+fileName);

		file.transferTo(dest);
		if(StringUtils.isNotBlank(type) && type.equals("1")) {
			ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
			if(configEntity==null) {
				configEntity = new ConfigEntity();
				configEntity.setName("faceFile");
				configEntity.setValue(fileName);
			} else {
				configEntity.setValue(fileName);
			}
			configService.insertOrUpdate(configEntity);
		}
		return R.ok().put("file", fileName);
	}
File upload = new File("D:/work/");这里路径建议在yml里面配置、然后读取、因为我这是简单的毕业设计项目、所以就直接写死了。

配置WebMvcConfigurationSupport重写addResourceHandlers即可实现。

/**
	 * springboot 2.0配置WebMvcConfigurationSupport之后,会导致默认配置被覆盖,要访问静态资源需要重写addResourceHandlers方法
	 */
	@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/**")
        .addResourceLocations("classpath:/resources/")
        .addResourceLocations("classpath:/static/")
		.addResourceLocations("classpath:/upload/")
		.addResourceLocations("classpath:/admin/")
        .addResourceLocations("classpath:/front/")
        .addResourceLocations("classpath:/public/");
		registry.addResourceHandler("/upload/**").addResourceLocations("file:D:/work/");
		super.addResourceHandlers(registry);
    }

 问题解决。简单记录一下。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 Spring Boot 和 Vue 项目中实现图片上传功能需要完成以下步骤: 1. 在 Spring Boot 中配置文件上传,可以使用第三方插件或写代码实现。 2. 在 Vue 中使用 axios 或其他方式实现向后端发送请求,上传图片。 3. 在 Spring Boot 中接收并处理图片,将图片保存到本地或者云存储服务器。 4. 在 Vue 中通过 axios 获取后端返回的图片 URL 地址,实现图片显示。 以上是大致的实现流程,具体实现细节可能因项目的不同而有所差别。 ### 回答2: Spring Boot和Vue是当前开发中使用较为广泛的技术框架,而图片上传则是实际项目中非常常见的功能。那么如何在Spring Boot和Vue中实现图片上传呢?下面将从前后端分别进行说明。 后端实现 在Spring Boot中,我们可以使用Spring MVC自带的MultipartFile来处理文件上传。首先,需要在Controller类中添加上传文件的接口,如下: ``` @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { // TODO: 处理上传的文件 return "上传成功"; } ``` 需要注意的是,对于前端传过来的文件,我们需要使用@RequestParam注解进行标记,并且文件名必须为“file”。 在处理上传的文件时,我们可以使用Java I/O流来进行操作。示例代码如下: ``` FileOutputStream fos = new FileOutputStream("文件存放路径"); InputStream is = file.getInputStream(); byte[] buffer = new byte[1024]; int len = -1; while ((len = is.read(buffer)) != -1) { fos.write(buffer, 0, len); } fos.flush(); fos.close(); is.close(); ``` 需要注意的是,文件存放路径需要根据实际情况进行修改。 前端实现 在Vue中,我们可以使用HTML5的FormData对象来实现文件上传。首先,在组件中添加文件上传的HTML代码,如下: ``` <input type="file" ref="file" @change="upload" /> ``` 需要注意的是,我们需要在input标签中添加ref属性,并且在@change事件中调用upload方法。在upload方法中,我们可以创建一个FormData对象,并将文件添加进去,然后使用axios库来进行数据传输。示例代码如下: ``` upload() { let formData = new FormData(); formData.append("file", this.$refs.file.files[0]); axios.post("/upload", formData) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); } ``` 需要注意的是,我们使用formData.append()方法将文件添加进去时,文件名也需要为“file”。 综上所述,Spring Boot和Vue图片上传实现较为简单,只需要在后端使用MultipartFile处理上传的文件,然后在前端使用FormData进行数据传输即可。 ### 回答3: Spring Boot 是一种流行的 Java Web 开发框架,提供了诸多实用的工具和组件,使得开发人员可以更加便捷地搭建网站应用。而 Vue 则是一种前端框架,它与 Spring Boot 的结合可以构建出一套完整的前后端分离应用。 当我们需要实现 Spring Boot Vue 图片上传时,需要进行以下步骤: 1. 添加 Vue-file-upload 插件 在 Vue 项目中添加 Vue-file-upload 插件,该插件能够实现图片的上传和预览功能。在 Vue 的组件内部,可以通过引入该插件并调用该插件的方法来实现图片上传功能。 2. 添加 Spring Boot 文件上传依赖 在 Spring Boot 中,可以通过添加文件上传依赖来实现文件上传的功能。具体而言,可以在 Maven 的依赖中添加 spring-boot-starter-web 和 spring-boot-starter-tomcat,以支持 Web 开发和文件上传。 3. 实现上传 API 在 Spring Boot 中实现一个文件上传的 API。可以使用 Spring Boot 的文件上传类 MultipartFile 来处理文件上传,该类提供了相关的方法并支持多种类型文件上传。在实现过程中,需要添加文件上传的路由,并在该路由中实现文件上传的逻辑。 4. 调用 API 完成文件上传Vue 的组件中,通过调用文件上传 API 来实现图片的上传。一般而言,可以在表单中添加一个文件选择框,用户选择图片后,触发上传事件并将选择的文件通过 API 上传到服务器上。上传成功后,服务器返回一个图片的 URL ,在 Vue 中即可通过该 URL 渲染图片。 5. 预览上传的图片 根据需求,在 Vue 中实现上传图片预览功能。通过调用 Vue-file-upload 插件提供的方法实现预览,并在图片上传成功后显示图片预览。 总体而言,Spring Boot Vue 图片上传的实现非常简单,并且通过使用一些实用的工具和组件,开发人员可以快速地搭建一个高效、稳定的图片上传功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值