Vue+SSM实现图片上传预览效果

现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上。

说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库是MySQL

实现思路:

前端界面:当用户点击上传文件按钮,选中待上传图片并点击确认后,这时应该把图片数据传给后台。当后台经过处理后返回结果,前端在根据响应结果做后续工作。

后端:后台拿到前端传过来的数据时,将图片文件存到固定的文件夹下(这个问题是我思考了很久的,我认为应该存在服务器下,原先我是存在本地文件夹下,然后用路径去引,这样说实话真的好笨,遇到了好多问题,搞了好久,被自己蠢哭)。文件存入后,返回响应结果。如果成功直接返回当前图片的相对路径,然后前端根据这个路径展示图片。

现在主要思考的问题是如何将图片资源放在Tomcat下。

实现这个问题,我是在Tomcat下创建了一个虚拟目录,今后所有的图片文件视频等资源都放在这个目录文件夹下

后端实现上传图片步骤如下:

1. 在Tomcat下创建虚拟目录

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

在tomcat的conf/server.xml,配置虚拟目录。增加下面这行
<Context path="/FileDir" docBase="G:\安装包\Tomcat\安装包\Tomcat 7.0\FileDir"/>

添加一张图片1.jpg到虚拟目录中,并启动tomcat测试。访问:http://localhost:8080/FileDir/1.jpg。可以请求到图片,说明配置成功。

2. 后端配置

引入文件上传下载jar包:commons-fileupload-1.3.2.jar和commons-io-1.3.2.jar

编写SpringMVC配置文件,添加如下代码:

<!-- 配置文件上传解析器 -->
 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- 设置请求编码格式 -->
  <property name="defaultEncoding" value="UTF-8"></property>
</bean>

创建一个用于文件上传的控制器类FileUploadController

package com.wyf.controller;

import java.io.File;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.wyf.po.Result;
import com.wyf.service.FileServlet;

/**
 * 文件上传控制器
 *
 * @author ASUS
 *
 */
@RestController
public class FileUploadController {

 @Autowired
 private FileServlet fileServlet;

 /**
  * 执行图片上传
  *
  * 解决前端获取后台数据中文乱码:produces={"application/json;charset=UTF-8"}
  */
 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST, produces = { "application/json;charset=UTF-8" })
 public Result handleUploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
  // 判断所上传文件是否存在
  if (!file.isEmpty()) {
   // 获取文件上传的原始名称
   String originalFilename = file.getOriginalFilename();
   //存储图片的路径
   String rootPath = "G:\\安装包\\Tomcat\\安装包\\Tomcat 7.0\\FileDir\\";
   // 设置上传文件的保存地址目录
   String path = "\\upload\\images\\applyShop";
   String dirPath = rootPath + path + "\\";
   File filePath = new File(dirPath);
   // 如果保存文件的地址不存在,就先创建目录
   if (!filePath.exists()) {
    filePath.mkdirs();
   }
   // 重新命名
   String newFileName = UUID.randomUUID() + "_" + originalFilename;
   try {
    // 使用MultipartFile接口的方法完成文件上传到指定位置
    file.transferTo(new File(dirPath + newFileName));
   } catch (Exception e) {
    e.printStackTrace();
    return new Result(false, "上传错误");
   }
   // 返回相对路径
   String srcPath = path + "\\" + newFileName;
   fileServlet.addUploadFIle(srcPath);
   return new Result(true, srcPath);
  }
  return new Result(false, "文件不存在");
 }
}

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

public class Result {

 private boolean flag;//处理结果标识
 private String message;//返回的结果信息
 /* 省略get()和set()*/
}

前端Vue界面,发送请求给后台后,通过动态绑定src属性,获取拿到的图片路径

<template>
  <div class="upload">
    <div class="img-container">
      <!-- 上传预览图片 -->
      <img :src="src" alt />
    </div>
    <!-- 文件上传的input -->
    <form class="input-file" enctype="multipart/form-data" method="post">
      <input type="file" ref="upload" name="uploadImg" id="file" @change="getFile" multiple />
      <!-- label一个 for 属性指向input的唯一 id ,这样点击label就相当于点击input -->
      <label for="file">上传图片</label>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
     src:require('../../assets/dist/images/admin.jpg'),
     srcPath:''//图片相对路径
    };
  },
  methods: {
   getFile(e) {
    let files = e.target.files[0]; //获取上传图片信息
  let formData = new FormData()
       formData.append('file',files)
      this.$axios.post("/api/uploadImg",formData).then(result=>{
       if(result.data.flag){
            this.srcPath = result.data.message
            this.src = `/imgURL${this.srcPath}`
            }else{
            console.log(result.data.message)
        }
      })
    }
  }
};
</script>

到这一步,基本能实现图片的上传和预览。但是有bug,中文乱码问题。如果图片路径带中文,src解析不出来,这个问题我也解决了很久。

找了各种百度,最后还是用的修改tomcat的server.xml配置文件方法。
我思考了一下出现乱码的原因,因为我的图片资源是通过访问tomcat拿到的,所以当img标签动态绑定后台传过来的路径时,提交的方式是get请求。前台拿到的路径中文是正确的,但是在tomcat下就会乱码,tomcat默认的编码方式是iso8859-1对中文编码,而前端设置的编码方式是utf-8,所以就出现了乱码。

我的解决办法是修改tomcat的server.xml配置文件

在tomcat的server.xml中找到

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

将这行修改为

<!--解决地址栏输入中文乱码问题在<Connector中加入 useBodyEncodingForURI="true" URIEncoding="UTF-8" -->
<!--useBodyEncodingForURI="true":代表get和post请求用一样的编码  -->
<!--URIEncoding="UTF-8":请求编码为utf-8  -->
<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"     useBodyEncodingForURI="true"/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue+Element+Springboot图片上传的实现示例

    最近没事刚好联系下vue+springboot前段后分离的项目.用上了图片上传功能.记录一下. 前端待提交的表单部分代码 <el-form-item label="封面图片"> <el-upload v-model="dataForm.title" class="avatar-uploader" :limit="1" list-type="picture-card" :on-preview

  • Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    在前端项目中,附件上传是很常用的功能,几乎所有的app相关项目中都会使用到,一般在选择使用某个前端UI框架时,可以查找其内封装好的图片上传组件,但某些情况下可能并不适用于自身的项目需求,本文中实现的附件上传区域支持超多类型附件分类型上传,并且可根据特定条件具体展示某些类型的附件上传,本文中是直接摘自具体的页面,后面会抽时间单独封装出来一个附件上传的组件. 一.Vue页面内附件展示区域代码 <div class="retuinfo"> <div class="

  • vue.js云存储实现图片上传功能

    前言 提示:以下是本篇文章正文内容,下面案例可供参考 一.对象存储 示对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,具有高扩展性.低成本.可靠安全等优点.通过控制台.API.SDK 和工具等多样化方式,用户可简单.快速地接入 COS,进行多格式文件的上传.下载和管理,实现海量数据存储和管理. 二.配置腾讯云Cos 1.引入库 代码如下(示例): 目标 : 配置一个腾讯云cos 由于上课的开发的特殊性,我们不希望把所有的图片都上传到我们

  • Vue使用axios图片上传遇到的问题

    FormData是个什么鬼? 经过多方搜索调查了解,这个神奇的东西是XMLHttpRequest Level 2 新增的一个对象,于2008年2月提出,可以利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件,可以把所有表单元素的name与value组成一个queryString,提交到后台. 划重点: 可以把所有表单元素的name与value组成一个queryString,提交到后台.这不就是后端所谓的转换数据格式,按格式提交呗,前后端分离肯定是异步提交,这个就可以很好的去解决

  • vue+axios实现图片上传识别人脸的示例代码

    目录 Axios请求 Qs处理数据分析 Vant上传文件格式 完整代码 本文主要介绍了vue+axios实现图片上传识别人脸的示例代码,分享给大家,具体如下: 先看最终效果: 这里采用的是vant的文件上传组件,通过上传图片后端识别图片里的人脸,返回到前端,获取该人脸匹配的工号或学号.以便后续其他系统使用,比如上传成功了一个人脸照片识别成功,可以通过人脸开启会议室的门禁.目前只是做了一个人脸上传的效果. Axios请求 使用axios请求数据,method:post时,data默认的传参数据类型

  • Vue+SSM实现图片上传预览效果

    现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上. 说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库是MySQL 实现思路: 前端界面:当用户点击上传文件按钮,选中待上传图片并点击确认后,这时应该把图片数据传给后台.当后台经过处理后返回结果,前端在根据响应结果做后续工作. 后端:后台拿到前端传过来的数据时,将图片文件存到固定的文件夹下(这个问题是我思考了很久的,我认为应该存在服务器下,原先我是存在本地文件夹下,然后

  • jQuery实现图片上传预览效果功能完整实例【测试可用】

    本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j

  • JavaScript使用FileReader实现图片上传预览效果

    FileReader是HTML5 File API的一部分.它实现了一种异步文件读取机制.可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器.为了读取文件中的数据,FileReader提供了如下几个方法. readAsText(file,encoding):以纯文本的方式读取文件,将读取到的文件保存到result属性中. readAsDataURL(file):读取文件并将文件以数据URI的形式保存在result属性中. readAsBin

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue实现图片上传预览功能

    本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"> <!--点击上传按钮--> <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @c

  • JS实现图片上传预览功能

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body&g

  • 模拟QQ心情图片上传预览示例

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以下插件,在别的图片上传功能说不定各位能用的上. 1.jQuery File Upload Demo地址:http://blueimp.github.io/jQuery-File-Upload/ 优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制: 缺点是在IE9等一些浏览器

  • js前端实现多图图片上传预览的两个方法(推荐)

    一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu

  • ie8本地图片上传预览示例代码

    复制代码 代码如下: imgpath= getRealPath(fileId): document.getElementById("divSBTP").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ imgpath + "\")";//使用滤镜效果 func

  • 基于JQuery实现图片上传预览与删除操作

    本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;

随机推荐