vuecrud钩子_Vue+ElementUI+SpringMVC实现图片上传和回显

Vue+ElementUI+SpringMVC实现图片上传和table回显

而我们也常遇到表单中包含图片上传的需求，并且需要在table中显示图片，所以这里我就讲一下结合后端的SpringMVC框架如何实现图片上传并提交到表单中，在table表格中回显照片。

本案例对应的开源项目地址请看我的GitHub仓库：

写在前面

本篇博文主要讲Vue.js+ElementUI如何实现图片上传和提交表单，前端技术会讲多一点，因此：

如果你对SpringMVC文件上传和下载不是很清楚，请查看我这篇博文： SpringMVC实现文件上传和下载

因为案例基于SSM框架，如果你你对SSM框架不是很清楚，请查看我这篇博文：SSM框架整合  GitHub

准备

首先，请一定阅读一下我的 SpringMVC实现文件上传和下载 本篇博文将不在详细讲这部分内容。

前端：

你会用到以下技术：

Vue.js

Vue-resource.js

ElementUI

我们将实现的效果是什么呢？

图片上传：

table展示：

思路分析

想要实现图片上传和table的回显，让我们先分析以下实现思路：

图片上传和表单提交

那么你就要明白图片上传和表单提交是两个功能，其对应不同的接口，表单中并不是保存了这个图片，而仅仅是保存了储存图片的路径地址。我们需要分析以下几点：

1、图片如何上传，什么时候上传？

图片应该在点击upload上传组件的时候就触发了对应的事件，当选择了要上传的图片，点击确定的时候就请求了后端的接口保存了图片。也就是说你在浏览器中弹出的选择框中选择了要上传的图片，当你点击确定的一瞬间就已将图片保存到了服务器上；而再点击提交表单的时候，储存在表单中的图片数据仅仅是刚才上传的图片存储地址。

2、如何获取到已经上传的图片的储存地址？

因为在浏览器上传选择框被确定选择的瞬间已经请求了后端接口保存了图片，我们该怎么知道图片在哪里储存呢？

前端： 比如我们使用了ElementUI提供的上传组件，其就存在一个上传成功的回调函数：on-success，这个回调函数被触发的时间点就是图片成功上传后的瞬间，我们就是要在这个回调函数触发的时候获取到图片储存的地址。

后端： 上面讲了获取地址，这个地址就是后端返回给前端的数据(JSON格式)。因为后端图片上传接口配置图片储存的地址，如果图片上传成功，就将图片储存的地址以JSON格式返回给前端。

3、如何提交表单

说如何提交表单，这就显得很简单了，因为上面我们已经完成了：1、图片成功上传；2、获取到了图片在服务器上的储存地址。利用Vue的双向绑定思想，在图片成功上传的回调函数on-success中获取到后端返回的图片储存地址，将这个地址赋值给Vue实例data(){}中定义的表单对象。这样在提交表单的时候仅需要将这个表单对象发送给后端，保存到数据库就行了。

图片在table的回显

想要将图片回显到table表格中其实很简单，前提只要你在数据库中保存了正确的图片储存地址；在table表格中我们仅需要在

列中新定义一列 即可完成图片回显。渲染table数据的时候循环给 中的src赋值数据库中保存的图片url即可。

后端实现

图片上传接口

注意： 关于SpringMVC如何实现文件上传和下载，请看我的博文： SpringMVC实现文件上传和下载 。这里我给出代码，就不再解释了(#^.^#)：

这里我将文件上传和下载接口单独抽离在一个Controller类中：

import com.instrument.entity.Result;

@RestController

public class UploadDownController {

/**

* 文件上传

* home.php?m