springboot+mybatispuls+bootstrap实现图片上传

一:首先在yml配置文件:图片大的话必须加 图片小的话可以不加

spring:
 servlet:
   multipart:
     enabled: true
     max-file-size: 50MB
     max-request-size: 50MB

二:在POM.XML中下载需要的包

 <!--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>

三:前台页面 

<div class="form-group">
    <div class="row">
        <div class="col-md-2"><label>图片:</label></div>
        <div class="col-md-10">
            <input name="recuImg" id="testimg">
            <input type="file" multiple class="projectfile" accept="image/*" name="headImg" id="headImg">
        </div>
    </div>
</div>


//上传图片
function uploadImg(url){
    $('#headImg').fileinput({
        initialPreview:url,
        //初始化图片配置:
        initialPreviewConfig: [
            {key: 1, showDelete: false}
        ],
        //是否初始化图片显示
        initialPreviewAsData: true,
        language: 'zh', //设置语言
        uploadUrl: '../user/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);
    });
}

四:Controller层  MultipartFile imgfile 和 前台页面 的name值保持一致

/**
 * @description:图片上传
 * @author:
 * @date: 2023/5/9 11:18
 * @param: [imgfile, request]
 * @return: String
 **/
@RequestMapping("uploadImg")
public String uploadImg(MultipartFile headImg, HttpServletRequest request){
    String filePath = FileUtil.uploadFile(headImg, request);
    System.out.println("{\"path\":\"" + filePath + "\"}");
    return "{\"path\":\"" + filePath + "\"}";//可以
}

五:图片上传工具类

/** 
 * <pre>项目名称:
 * 文件名称:FileUtil.java 
 * 包名:com.jk.zrq.utils 
 * 创建日期:2020年7月9日下午4:32:26 
 * Copyright (c) 2020, yuxy123@gmail.com All Rights Reserved.</pre> 
 */  
package com.jk.zrq.utils;

import java.io.File;
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.web.multipart.MultipartFile;
/**
 * 
 * <pre>项目名称:ssm_bootstrap    
 * 类名称:FileUtil    
 * 类描述: 图片上传下载工具类
 * 创建人:zrq
 * 创建时间:2023年3月29日 下午3:20:01    
 * 修改人:zrq
 * 修改时间:2023年3月29日 下午3:20:01    
 * 修改备注:       
 * @version </pre>
 */
public class FileUtil {

	/**
	 * @description:图片上传
	 * @author:zrq
	 * @date: 2023/5/9 12:32
	 * @param: [imgfile, request]
	 * @return: String
	 **/
	public static String uploadFile(MultipartFile imgfile, HttpServletRequest request){
		String path = request.getServletContext().getRealPath("/")+"/upload";
		File file = new File(path);
		if(!file.exists()){//不存在
			file.mkdirs();
		}
		String uuid = UUID.randomUUID().toString();
		String oldName = imgfile.getOriginalFilename();//1.jpg
		String suffix = oldName.substring(oldName.lastIndexOf("."));
		String newFile = uuid+suffix;
		File file2 = new File(path+"\\"+newFile);
		try {
			imgfile.transferTo(file2);
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return "upload/"+newFile;
	}
	
	//下载
	/**
	 * <pre>downloadFile(下载)   
	 * 创建人:zrq
	 * 创建时间:2023年3月29日 下午3:21:31    
	 * 修改人:zrq
	 * 修改时间:2023年3月29日 下午3:21:31    
	 * 修改备注: 
	 * @param filename
	 * @param request
	 * @return</pre>
	 */
	public static ResponseEntity<byte[]> downloadFile(String filename,HttpServletRequest request){
		
		//截取文件名称
		filename = filename.substring(filename.lastIndexOf("/")+1);

		//1、获取要下载的文件:文件的完整地址
		//D:\workUtilsInstall\apache-tomcat-8.0.0\webapps\ssm-demo-wdd\\upload\\1.jpg
		String path = request.getServletContext().getRealPath("/")+"/upload/"+filename;
		
		//2、把下载的文件转换成字节数组
		File file = new File(path);
		byte[] byteArray = null;
		HttpHeaders header = new HttpHeaders();
		try {
			byteArray = FileUtils.readFileToByteArray(file);
			//3、设置响应为文件下载:header设置
			//name :设置 content-disposition 属性的值  inline
			//filename:下载显示的文件名称
			header.setContentDispositionFormData("attchment", URLEncoder.encode(filename, "utf-8"));
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		
		//4、下载:把文件输出/返回到浏览器
		//参数一  body:下载的文件内容
		//参数二 headers: 设置响应为文件下载
		//参数参 请求的状态码  200 404 400 500
		return new ResponseEntity<byte[]>(byteArray, header, HttpStatus.OK);		
	}
}
  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值