ssm如何实现图片上传,

　　本文主要详细介绍了Vue SSM上传和预览图片的效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　现在的要求是：有一个上传文件按钮。当我们点击按钮时，我们可以选择要上传的文件。确认后，图像将显示在界面上。

　　描述：本项目前端使用的Vue，后台用的SSM搭建的，服务器是Tomcat，数据库是MySQL

实现思路：

　　前端界面：当用户点击上传文件按钮，选择要上传的图片，点击确定后，图片数据就要传到后台了。当后台返回处理后的结果时，前端正在根据响应结果做后续工作。

　　后端：后台从前端获取数据时，将图片文件保存在一个固定的文件夹中(这个问题我想了很久，我觉得应该保存在服务器下。本来我是存放在本地文件夹，然后用路径来引导。说实话，真的很蠢。遇到了很多问题，做了很久，傻到自己哭)。文件保存后，返回响应结果。如果成功，直接返回当前图片的相对路径，然后前端按照这个路径显示图片。

　　现在要考虑的主要问题是如何把图片资源放到Tomcat下面。

　　意识到这个问题，我在Tomcat下创建了一个虚拟目录，以后所有的图片、文件、视频等资源都会放在这个目录文件夹下。

　　上传图片的后端步骤如下：

　　1. 在Tomcat下创建虚拟目录

　　在tomcat的根目录下创建一个名为FileDir的目录(当然这个目录也可以在其他地方建立)。

　　在tomcat的conf/server.xml中，配置虚拟目录。添加以下一行

　　上下文路径=/FileDir docbase= g:\ installation package \ Tomcat \ installation package \ Tomcat 7.0 \ FileDir /

　　将图片1.jpg添加到虚拟目录中，并启动tomcat测试。访问：3358 localhost:8080/filedir/1 . jpg可以请求图片，说明配置成功。

　　2. 后端配置

　　介绍文件上传和下载jar包：commons-fileupload-1.3.2.jar和commons-io-1.3.2.jar。

　　编写SpringMVC配置文件，并添加以下代码：

　　！-配置文件上传解析器-

　　bean id= multipart resolver class= org . spring framework . web . multipart . commons . commonsmultipartresolver

　　！-设置请求编码格式-

　　属性名=defaultEncoding 值= UTF-8 /属性

　　/bean

　　为文件上传创建一个控制器类FileUploadController。

　　包com . wyf . controller；

　　导入Java . io . file；

　　导入Java . util . uuid；

　　导入javax . servlet . http . http servlet request；

　　导入org . spring framework . beans . factory . annotation . auto wired；

　　导入org . spring framework . web . bind . annotation . request mapping；

　　导入org . spring framework . web . bind . annotation . request method；

　　导入org . spring framework . web . bind . annotation . request param；

　　导入org . spring framework . web . bind . annotation . rest controller；

　　导入org . spring framework . web . multipart . multipart file；

　　导入com . wyf . po . result；

　　导入com . wyf . service . file servlet；

　　/**

　　*文件上传控制器

　　*

　　* @作者华硕

　　*

　　*/

　　@RestController

　　公共类FileUploadController {

　　@自动连线

　　私有文件服务器文件服务器；

　　/**

　　*执行图像上传。

　　*

　　*解决前端获取后台数据的中文乱码：productions={ application/JSON；charset=UTF-8}

　　*/

　　@ request mapping(value=/upload img ，method=RequestMethod。POST，produces={ application/JSON；charset=UTF-8 })

　　公共结果handleUploadImg(@ request param( file )multipart file文件，HttpServletRequest请求){

　　//判断上传的文件是否存在。

　　如果(！file.isEmpty()) {

　　//获取上传文件的原始名称

　　string original filename=file . getoriginal filename()；

　　//存储图片的路径

　　Rootpath= g: \ \安装包\\Tomcat\\安装包\ \ Tomcat 7.0 \ \ FileDir \ \ ；

　　//设置上传文件的保存目录。

　　string path= \ \ upload \ \ images \ \ apply shop ；

　　String dirPath=rootPath路径 \ \ ；

　　File filePath=新文件(dirPath)；

　　//如果保存文件的地址不存在，先创建目录

　　如果(！filePath.exists()) {

　　file path . mkdirs()；

　　}

　　//重命名

　　string new filename=uuid . random uuid() _ original filename；

　　尝试{

　　//使用MultipartFile接口的方法将文件上传到指定位置。

　　file.transferTo(新文件(目录路径新文件名))；

　　} catch(异常e) {

　　e . printstacktrace()；

　　返回新结果(假，“上传错误”)；

　　}

　　//返回相对路径

　　string src path=path \ \ new filename；

　　file servlet . adduploadfile(src path)；

　　返回新结果(true，src path)；

　　}

　　返回新结果(false，“文件不存在”)；

　　}

　　}

　　这里用一个Result类返回数据，用来封装返回的结果信息，以JSON格式返回到前端。代码如下：

　　公共类结果{

　　私有布尔标志；//处理结果ID

　　私有字符串消息；//返回的结果信息

　　/*省略get()和set()*/

　　}

　　前端Vue接口，向后台发送请求后，动态绑定src属性，获取获取的图像路径。

　　模板

　　div class=上传

　　div class= img-容器

　　！-上传预览图片-

　　img :src=src alt /

　　/div

　　！-文件上传的输入-

　　form class= input-file enctype= multipart/form-data method= post

　　input type= file ref= upload name= upload img id= file @ change= getFile multiple/

　　！-属性的标签A指向输入的唯一id，因此单击标签相当于单击输入-

　　Label= file 上传图片/label

　　/表单

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　src:要求(././assets/dist/images/admin.jpg )，

　　srath: //图片的相对路径

　　};

　　},

　　方法：{

　　获取文件(e) {

　　let files=e . target . files[0]；//获取上传的图片信息

　　假设formData=新表单数据()

　　formData.append(file ，files)

　　这个。$axios.post(/api/uploadImg ，formData)。然后(结果={

　　if(result.data.flag){

　　this . src path=result . data . message

　　this . src=`/imgURL $ { this . src path } ` 1

　　}否则{

　　console.log(结果.数据.消息)

　　}

　　})

　　}

　　}

　　};

　　/脚本

　　通过这一步，基本可以实现图片的上传和预览。但是有一个bug，中文乱码问题。如果图片路径是中文，src无法解析，这个问题我已经解决很久了。

　　找了各种百度，最后用了修改tomcat的server.xml配置文件的方法。

　　我想了想乱码的原因，因为我的图片资源是通过访问tomcat获得的，所以img标签从后台动态绑定路径时，提交方式是get request。前台获取的路径中文是正确的，但是在tomcat下会出现乱码。tomcat默认的中文编码方式是iso8859-1，而前端设置的编码方式是utf-8，所以出现乱码。

　　我的解决方案是修改tomcat的server.xml配置文件。

　　在tomcat的server.xml中找到

　　连接器连接超时=20000 端口=8080 协议=HTTP/1.1 重定向端口=8443/

　　将这一行修改为

　　！-解决地址栏中文乱码输入问题，在连接器中增加usebodycodingforuri= true uri encoding= utf-8 --

　　！- useBodyEncodingForURI=true :这意味着get和post请求以相同的方式编码-

　　！-uri encoding= utf-8 :请求编码是utf-8-

　　连接器uri encoding= UTF-8 connection time out= 20000 port= 8080 protocol= HTTP/1.1 redirect port= 8443 useBodyEncodingForURI= true /

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。