Vue结合SpringBoot文件上传并返回路径映射

创建一个Vue项目

• 这里我们使用最简单的form表单进行上传
• 这里需要注意的有三点
  • 1 action的路径要和后端接口的路径对应
  • 2 上传的数据类型要设置为 multipart/form-data
  • 3 请求的方法类型要为POST

创建一个SpringBoot项目

• 目录结构和maven依赖如下
  

• 这里的自定义配置是服务器存放文件的路径
  

• 这里的为读取上图所配置的路径路径信息
  这里切记set方法不能是static,负责不会被调用
  

• 这里为接收文件并存储到服务器上并返回网络路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NiqilmVm-1611292140450)(]
r)

• 这里为定义的资源映射路径前缀
  
• 这里为定义的资源文件路径映射
  
• 效果展示
  
  
  
  

例如我们返回的网络路径为http://localhost:8080/profile/757be436-40e9-4e25-8099-5f0cf2cb1d0c.pdf

会将路径映射为: http://localhost:8080/D:bear/upload/757be436-40e9-4e25-8099-5f0cf2cb1d0c.pdf

这样做之后就不会将我们的服务器文件的真实路径暴露给用户