SpringBoot图片上传与显示

开发环境 Springboot版本, 2.0.1 jdk 1.8 文件上传的前端组件: WebUploader

一. 前端发送文件上传的请求

引入webuploader的资源到项目中, 资源的下载官方地址 http://fex.baidu.com/webuploader/download.html 在页面中引入css和js的资源.

在具体业务中的使用,js代码如下. 其中有auto属性,设置是否选择图片后, 自动提交, 这里选择的是true,代表选择图片后, 自动提交上传.

// 上传头像
var commonUploader = new $CommonUploader({      // 自己封装的uploader对象
    uploadBtnId: 'file',
    uploadBtnName: '浏览...',
    fileLimit: true,
    formData: {},
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png',
    auto: true,                        // 是否添加后自动提交，默认是true
    uploadUrl: Feng.ctxPath+'/staffMember/filesUpload',   // 上传接口路径
    fileQueuedFn: function(file) {
        $('#fileName').text(file.name);
        $('#fileName').attr('title', file.name);
    },
    uploadBeforeSend: function(object, data) {  // 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。

    },
    //上传成功回调函数
    uploadSuccessFn: function (file, response) {
        if (response.code == 200) {
            Feng.success("上传成功!");
        }
        // 获取处理后的文件名
        var fileHandName = response.data;
        $("#handleFileName").val(fileHandName);
        // 原始的文件名
        $("#originalFilename").val(file.name);

        // 给图片预览赋值
        $("#staffPhoto").show().attr("src",Feng.ctxPath+'/upload/'+fileHandName)
    }
});

var webUploader = commonUploader.init();        // webUploader组件提供的uploader对象
$('#sendByHandle').on('click', function() {
    webUploader.upload();
});

webUploader.on('fileQueued', function( file ) {
    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    webUploader.makeThumb( file, function( error, src ) {
        $("#staffPhoto").attr( 'src', src );
    }, 80, 100 );
});

$(function() {
    // 获取人员的图片地址
    var staffPhoto = $("#handleFileName").val();
    if (staffPhoto) {
        //给img标签的src赋值
        $("#staffPhoto").attr("src",Feng.ctxPath+'/upload/'+staffPhoto);
    }
});

html页面中的代码

@layout("/common/_container.html"){

    
        
            

            
                

                    
                    

                    
                        照片
                        
                            
                            
                        
                    
                
               
            
        
    


@}

二. 后台接收图片上传的请求

在某个Controller中 , 进行图片上传的接收. 存储的图片上传的路径为, 当前项目下的新建的upload目录.

  private Boolean haveCreatePath = false;
 @PostMapping("filesUpload")
    @ResponseBody
    public Object filesUpload(@RequestParam("file") MultipartFile[] file) {
        // 接收处理后的文件名
        String fileName ="";

        //判断file数组不能为空并且长度大于0
        if(file!=null&&file.length>0){
            //循环获取file数组中得文件
            for(int i = 0;i';
        return result;
    }
}

在后台中,写一个Controller, 用于接收显示图片的请求 代码如下

@Controller
@RequestMapping("/upload")
public class DownloadImgController {

    /**
     * 返回图片
     *
     * @author
     */
    @RequestMapping("/{upload}")
    public void renderPicture(@PathVariable("upload") String pictureId, HttpServletResponse response, HttpServletRequest resquest) {
        //文件夹获取路径
        String path = resquest.getSession().getServletContext().getRealPath("") +"upload"+ File.separator+ pictureId;
        try {
            //获取流
            byte[] bytes = FileUtil.toByteArray(path);
            //输出流
            response.getOutputStream().write(bytes);
        } catch (Exception e) {
            //如果找不到图片就返回一个默认图片
            try {
                response.sendRedirect(resquest.getContextPath()+"/static/img/user.png");
            } catch (IOException e1) {
                e1.printStackTrace();
            }
        }
    }
}