SpringBoot+Vue+token实现（表单+图片）上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显（一））

已于 2022-11-05 14:05:19 修改
阅读量2.5k 收藏 15
点赞数 6
分类专栏： # SpringBoot 项目实战业务案例分析及代码实现 文章标签： vue.js spring boot
于 2022-10-13 13:16:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43304253/article/details/127295249
版权

一般来说新增一个商品、商品的属性一般都包含图片信息。如何将图片和商品的其它属性一起传给后端？是优先处理图片信息？还是图片和其它属性数据一块提交给后端处理？带有图片资源的请求头如何设置？数据库中是存放图片还是存放图片的访问地址？如何做图片地址的资源映射？是在yml文件中进行资源映射？还是用java类编写？存放的图片名称是否需要处理？是调用工具类、还是手动处理？如何设置图片在本地磁盘的存放位置？如何将图片存放到项目中的静态资源下？如果使用了token验证、图片资源是否被拦截？是否需要配置过滤器来进行过滤？存放到数据库的图片地址，在浏览器中访问不到，该怎么办？如果图片的访问路径中包含中文导致资源访问不到又该怎么办？前端如何回显存放的图片？如何点击莫一个商品的预览按钮、显示对应商品的图片？如何将图片放入dialog弹出框中？dialog弹出框加载图片的问题？如何在vue中使用jQuery？

以上是我遇到的，我也不知道咋会遇到这样多的问题

前言： 实现的效果演示

新增商品图片以及图片预览

1、大致思路

以下是基于先处理图片、后端返回图片地址进行的

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Mr.Aholic
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
订阅专栏
Springboot+Vue实现将图片和表单一起提交到后端，同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
做笔记\记录遇到的程序bug
04-06 6431
1、实现的效果 2、Vue前端 <!-- ==================================增加汽车==========================================--> <el-dialog title="添加汽车" :visible.sync="adddialogVisible" width="30%" :close-on-click-modal="f
springboot 实现图片上传功能
m0_67400973的博客
06-12 1万+
这几天在做重构学校的图书馆项目，用sprinboot重新搭建项目，原项目是使用PHP搭建的，刚开始看着挺懵的，慢慢的就看懂。这个项目中遇到的难题是照片上传功能，弄了挺久才实现出来。此功能没有导入如何jar包。这里介绍呢，我就按照项目本身的结构来实现这个功能。首先是数据库的数据结构，项目先是通过照片名（xxx.jpg）保存到数据库（picurl）. 故我的想法是通过新书的名字，获取到这个新书对应的照片名，进行对上传上的照片进行名字的修改。 2.Service层 3.自定义异常 3.1service层自定义
vue实现的上传图片到数据库并显示到页面功能示例
12-29
本文实例讲述了vue实现的上传图片到数据库并显示到页面功能。分享给大家供大家参考，具体如下： 1、点击上传图片，弹出选择图片选项框。 页面代码： 上传图片 <input type=file name=avatar id=avatar multiple=multiple @change=upload> 由于我们要
Springboot+Vue+ElementUI实现表单上传图片同时数据库存储url
weixin_45763399的博客
10-24 4124
springBoot+Vue+ElementUI图片上传
vue+springboot前端如何获取服务器或磁盘中的图片
lCSDNkingdoml的博客
04-10 9166
前后端分离下，前端如何进行图片的显示
springboot上传图片到本地磁盘，访问虚拟路径显示
iiyue的博客
10-21 940
目录 前言 一、配置虚拟路径 二、表单.jsp add界面-可预览图片 三、后端controller 四、table.jsp 总结 博主遇到的报错有： Failed to load resource: the server responded with a status of 404 () Not allowed to load local resource 都解决了，可以看看以下代码。 前言 最近刚学了文件上传，实战springboot2实现文件上传到本地后用虚拟路径访问到图片
（Spirng笔记）SpringBoot表单上传图片完整URL存数据库
张松的博客
09-09 3231
SpringBoot表单上传图片完整URL存数据库，亲测可行
springboot项目中解决SpringBoot上传图片后访问不到的问题
wyr1235的博客
04-21 2804
原理是服务器的保护措施导致的，服务器不能对外部暴露真实的资源路径，需要配置虚拟路径映射访问。路径为：idea项目下的 resources/static/upload/img/**后端：mybatis+springboot架构。在前端上传图片之后，上传到指定的本地路径。前端：thymeleaf。
vue上传图片至本地resources文件夹，将路径保存在数据库；
lixiansen1511的博客
11-10 5764
vue上传图片至项目resource文件夹，将路径返回至前端，并将路径保存在数据库； 前端代码： <el-form-itemlabel="商品图片：":sm="3"prop="pic"> <el-col:sm="16"> <el-uploadclass="upload-demo"dragmultiplelist-type="picture" accept=".jpg,.jpe...
Springboot怎么实现图片上传
weixin_62883794的博客
05-18 4650
label class="col-sm-2 control-label">图片</label>-- imgfile 是上传图片的参数 类型是 MultipartFile 文件类型imgfile 必须和后台 上传图片的方法 uploadImg 参数保持一致 --></div></div>js中定义函数 图片上传<script>//上传图片//初始化图片配置：],//是否初始化图片显示language: 'zh', //设置语言。
springboot 上传图片
最新发布
grow_的博客
06-05 1769
springboot上传图片
SpringBoot 图片上传（详解篇）
FATCATS博客
07-31 1万+
前言：SpringBoot在服务器内上传文件，是临时文件，在重启时候会生成另外的目录，也就意味着原来上传的图片在重启后就访问不到了。 1.图片上传 @PostMapping("/upload") public CommonResult insertDbMsPhoto(@RequestPart("photos") MultipartFile[] photos, @RequestParam("mid") String mi
SpringBoot项目上传图片（本地/OSS）
aichijvzi的博客
12-16 5935
在分布式项目中，通常一个项目中会用到很多服务器，如果我们还像单体项目中将文件/图片上传到本地，而下一次访问的时候，如果我们访问的服务器不是上一次保存的服务器的话，我们就访问不到自己上传的数据，这显然不是我们希望的，这时候我们就用到OSS对象存储。图片上传完成之后，我们可以到项目中的==/images==目录下查看，如果图片存在就说明我们已经成功的将图片上传到我们的项目中了。文件校验（包括但不限于，图片的大小、图片的类型、图片是否为空、上传的是否是文件等）这里截取后缀名我为了代码简洁，直接链式调用获取。
SpringBoot简单优雅实现图片上传功能（超详细）
BBX__XB的博客
12-11 9965
最近有一个需求需要实现图片上传，因此，本人找到了一个可以快速实现该功能的插件mini-upload-form。在此记录分享一下使用过程。mini-upload-form的Github跳转将程序从github拉下后，前端页面index.html可简单修改后直接使用，我们的精力主要放在后端实现。MultipartFile是SpringMVC提供简化上传操作的工具类。
SpringBoot实现图片的上传
xiaochen的博客
06-24 3983
SpringBoot实现图片的校验与上传
Springboot+vue 实现图片上传至数据库并显示
XINANSHAN的博客
10-08 8293
springboot+vue 实现图片上传至数据库并回传显示
springboot+vue+mysql实现前端上传图片到本地并将url存入本地数据库
又菜又爱写
12-07 9928
springboot+vue+mysql实现前端上传图片到本地并将url存入本地数据库
spring boot实现图片的上传和下载功能
热门推荐
wj903829182的专栏
10-31 3万+
              这篇博客简单介绍下spring boot下图片上传和下载，已经遇到的问题。首先需要创建一个spring boot项目。 1，核心的controller代码package com.qwrt.station.websocket.controller; import com.alibaba.fastjson.JSONObject; import com.qwrt.stati...
SpringBoot图片保存与读取
m0_52133525的博客
03-10 9221
在自己做一些小项目的时候遇到一个保存图片的问题，很明显，单独去买一个服务器保存图片划不着，而保存到数据库效率太低了。 网上查到的保存方法大多数分两种： 一种是直接保存到项目路径下面，这样的话，一旦服务重新部署保存的图片直接就G了。 另一种是保存到其他路径，这里介绍的就是保存到其他路径的方法。...
springboot+vue 上传图片，将图片存储到数据库
06-01
将图片存储到数据库并不是一个好的做法，因为数据库存储的是结构化数据，而图片是二进制数据，会占用大量的数据库存储空间，降低数据库的性能。更好的做法是将图片存储到文件系统或者对象存储中，然后在数据库中存储图片的路径或者文件名。 下面是一个简单的上传图片并将图片路径存储到数据库的示例： 1.前端页面使用Vue上传图片 ```html <template> <div> <input type="file" @change="handleFileChange"> <button @click="uploadImage">上传图片</button> </div> </template> <script> export default { data() { return { file: null } }, methods: { handleFileChange(e) { this.file = e.target.files[0]; }, uploadImage() { let formData = new FormData(); formData.append('file', this.file); axios.post('http://localhost:8080/upload', formData) .then(response => { // 上传成功后，将图片路径存储到数据库 let imagePath = response.data.imagePath; // ... }) .catch(error => { console.log(error); }); } } } </script> ``` 2.后端使用Spring Boot接收并处理上传的图片 ```java @RestController public class UploadController { @Autowired private ImageService imageService; @PostMapping("/upload") public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) { try { // 保存图片到文件系统或者对象存储 String imagePath = imageService.saveImage(file); // 将图片路径存储到数据库 // ... return ResponseEntity.ok().body(new UploadResponse(imagePath)); } catch (Exception e) { e.printStackTrace(); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build(); } } } public class UploadResponse { private String imagePath; // getter and setter } @Service public class ImageService { public String saveImage(MultipartFile file) throws IOException { // 保存图片到文件系统或者对象存储 // ... return imagePath; } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.Aholic

整理不易、多谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值