SpringBoot+Bootstrap 上传图片

SpringBoot+Bootstrap 上传图片

application.yml配置

#配置mysql的连接
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/wyzy?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC&allowMultiQueries=true
    username: root
    password: 123456
  #配置thymeleaf
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    servlet:
      content-type: text/html
    cache: false
  servlet:
    multipart:
      enabled: true
      max-file-size: 50MB
      max-request-size: 50MB


  #<!--启动图标-->
  banner.location: classpath:banner.txt
  resources:
    static-locations=classpath:/static/:

pom.xml文件

<dependencies>
    <!-- redis -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.3.0</version>
    </dependency>

    <dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <!--Io流验证码（程序类、流实现、文件过滤、文件比较器、endian转换类）-->
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>


    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi</artifactId>
        <version>3.10-beta2</version>
    </dependency>


    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi-ooxml</artifactId>
        <version>3.10-beta2</version>
    </dependency>

    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi-ooxml-schemas</artifactId>
        <version>3.10-beta2</version>
    </dependency>

    <!--Json格式转换-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.62</version>
    </dependency>

    <!--德鲁伊数据源 可有可无-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.16</version>
    </dependency>
    

</dependencies>

上传图片工具类

springboot中 request.getServletContext().getRealPath(“/”) 获取的是一个临时文件夹的地址

package com.jk.zz.utils;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.util.ResourceUtils;
import org.springframework.web.multipart.MultipartFile;

public class FileUtil {

	//上传图片
	public static String uploadFile(MultipartFile imgfile, HttpServletRequest request){
    	//1、上传路径：项目发布tomcat服务器
        //request.getServletContext().getRealPath(“/”) 获取的是一个临时文件夹的地址
		String path = request.getServletContext().getRealPath("/")+"/upload";
		
		//2、文件
		File file = new File(path);
		if(!file.exists()){//不存在
			file.mkdirs();
		}
		
		//生成新的文件名称，原因：防止文件名称一样后者上传的文件会覆盖前者上传的文件（前提是文件名称必须一样并且在用一个目录下）
		//生成新的文件名称，保证文件名称唯一有两种方法：
		// 	  1.通过UUID实现文件名称唯一 （UUID会生成32位字母+数字唯一的一个字符串）
		//	  2.通过时间戳现文件名称唯一  （时间戳是毫秒级时间 时间会一直往上加，生成13位数字）注意只有java生成13位 其他则是10位比如oracle、mysql、php
		//  获取时间戳
		//long currentTimeMillis = System.currentTimeMillis();
		//System.out.println(currentTimeMillis);
		String uuid = UUID.randomUUID().toString();
		
		String oldName = imgfile.getOriginalFilename();//1.jpg
		//截取文件后缀:.jpg
		String suffix = oldName.substring(oldName.lastIndexOf("."));
		//新文件名
		String newFile = uuid+suffix;
		
		//3、上传
		D:\workUtilsInstall\apache-tomcat-8.0.0\webapps\week_employee_hzy\\upload\1.jpg
		File file2 = new File(path+"\\"+newFile);
		try {
			imgfile.transferTo(file2);
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return "upload/"+newFile;
	}
	

}

前端上传图片样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入bootstrap的css 文件 -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">


    <!-- 引入jquery文件 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstrap的js文件 -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>

    <!-- 引入tree的js、css文件 -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
    <script type="text/javascript" src="../js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>


    <!-- 引入bootbox弹框的css、js文件 -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>


    <!-- 引入表格的css、js -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>


    <!-- 引入上传文件的css、js文件 -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css">
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>

    <!-- 引入选项卡的css、js文件 -->
    <link rel="stylesheet" href="../js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
    <script type="text/javascript" src="../js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
</head>
<body>
    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>头像：</label></div>
            <div class="col-md-10">
                <!-- name="garbageImg" 自己的封装图片字段 -->
                <input name="garbageImg" id="testimg">
                <input type="file" multiple class="projectfile" accept="image/*" name="headImg" id="headImg">
            </div>
        </div>
    </div>
</body>
<script>
	$(function(){
        uploadImg();
    })
                    
	function uploadImg(url){
        $('#headImg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '../wareUser/uploadImg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        }).on('fileuploaded', function(event, data, previewId, index) {
            //alert(data.response);
            alert(location.host)
            var	imgval ="http://"+ location.host+"/"+data.response.path;
            $('#testimg').val(imgval);
        });
    }
</script>
</html>

location.host+“/” http://localhost:8080/

controller 层

@RequestMapping("uploadImg")
public String uploadImg(MultipartFile headImg, HttpServletRequest request){
    String filePath = FileUtil.uploadFile(headImg, request);
    System.out.println("{\"path\":\"" + filePath + "\"}");
    return "{\"path\":\"" + filePath + "\"}";//可以
}

return “{“path”:\”" + filePath + “\”}";

转换成 json 格式 要不然会报错