ssm和vue实现图片的上传和回显，以及图片的访问_ssm+vue 简述如何实现上传功能-优快云博客

本文链接：https://blog.youkuaiyun.com/new_buff_007/article/details/103634831

本文详细介绍了使用SSM（Spring、SpringMVC、MyBatis）和Vue.js实现图片上传和回显的过程，以及解决在实际项目中遇到的问题。通过两步实现图片上传至服务器并存储图片名到数据库，最后展示了解决问题的关键代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原来有做过图片的上传，也不是很难，而且在访问图片时候也没有发现问题，但是在刚刚要完成的一个小项目里面却屡屡爆出问题，困扰了整整一天，终于解决。但是也不知道是怎么解决的，只是把代码搬出来，防止以后犯错。

实现思路：

在图片的上传其实是分为两步：

（1）先将图片上传到指定的文件夹下边，并且返回一个图片的名称。

（2）将整个表单，包括图片的名称一起保存到数据库中去。

第一步实现

前端vue的表单代码

<el-form-item label="图片上传" prop="img_path">
     <el-upload
          class="avatar-uploader"
          action="http://localhost:80/imgs/imgUpload"
          :show-file-list="false"
          name="picture"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
          <el-dialog  :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

Controller类的书写

@Controller
@RequestMapping(value = "/imgs",produces = { "text/html;charset=UTF-8;", "application/json;charset=UTF-8;" })
public class ImgUploadController {

    @RequestMapping("/imgUpload")
    @ResponseBody