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

时间:2024-03-30 17:15:04

创建一个Vue项目

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

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

创建一个SpringBoot项目

  • 目录结构和maven依赖如下
    Vue结合SpringBoot文件上传并返回路径映射

  • 这里的自定义配置是服务器存放文件的路径
    Vue结合SpringBoot文件上传并返回路径映射

  • 这里的为读取上图所配置的路径路径信息
    Vue结合SpringBoot文件上传并返回路径映射

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

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

  • 这里为定义的资源映射路径前缀
    Vue结合SpringBoot文件上传并返回路径映射
  • 这里为定义的资源文件路径映射
    Vue结合SpringBoot文件上传并返回路径映射
  • 效果展示
    Vue结合SpringBoot文件上传并返回路径映射
    Vue结合SpringBoot文件上传并返回路径映射
    Vue结合SpringBoot文件上传并返回路径映射
    Vue结合SpringBoot文件上传并返回路径映射

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

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

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