使用LayUI中Upload模块上传图片示例（包含前后端代码）

lauyi 文件上传的详细用法：layui.upload

一。前台代码块：

<!--
图片上传控件
 -->
<div class="layui-upload">
	<button type="button" class="layui-btn" name="payment_url" id="alipay_btn">上传截图</button>
	<div class="layui-upload-list layui-upload-list-plus" id="alipay_photo">
		 <ul class="multifyBox">
																    	
		</ul>
		 <!--<p id="uploadText_zs"></p>-->
	</div>
</div> 																					
<!--
end图片上传
 -->

//js控制控件上传
<script type="text/javascript">
           /*
			  lauyi 文件上传的详细用法：https://www.layui.com/doc/modules/upload.html
			*/
			layui.use('upload', function(){
			  var $ = layui.jquery
			  ,upload = layui.upload;			  
			  
			  /*
			   * 支付宝-转账截图/记录,可上传多张
			   * */		 
			 var aliPay=upload.render({
			    elem: '#alipay_btn'
			    ,url: '/order/imageUpload' //改成您自己的上传接口
			    ,multiple: true
			    ,choose: function(obj){
			    	var files = obj.pushFile();
			      //预读本地文件示例，不支持ie8
			    obj.preview(function(index, file, result){
			      	console.log(index); //得到文件索引
                    console.log(file);
			        $('#alipay_photo').show().find('.multifyBox').append(
			        	'<li class="mlist'+index+'">'
					    +	'<i id="removePimg'+index+'" class="removePimg"></i>'
					    +	'<img id="layui-uploadimg'+index+'" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'
					    +'</li>'									        	
			        )
			        
			        // 删除图片
			        $("#removePimg"+index).on("click", function(event){
			        	var _that=$(this);
			        	//_that.next('.layui-upload-img').attr('src','')
			           // _that.parent().remove(); 
			            
			            delete files[index];	
			            $(".mlist"+index).remove();
			        });
			        
			        //某图片放大预览
			        $("#layui-uploadimg"+index).on('click',function () {
			            var width = $("#layui-uploadimg"+index).width();
			            var height = $("#layui-uploadimg"+index).height();
			            var scaleWH = width/height;
			            var bigH = 600;
			            var bigW = scaleWH*bigH;
			            if(bigW>900){
			                bigW = 900;
			                bigH = bigW/scaleWH;
			            }
			 
			            // 放大预览图片
			            layer.open({
			                type: 1,
			                title: false,
			                closeBtn: 1,
			                shadeClose: true,
			                area: [bigW + 'px', bigH + 'px'], //宽高
			                content: "<img class='ngsPic' width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
			            });
			        });			        
			      });
			    }
			    ,done: function(res){
			    	//如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //得到上传后的url
					 imageUrl=res.data.url;
					 //console.log(res.data);
				    //上传完毕
				    console.log('上传完毕')
			    }			   
			  });
	       })
	       </script>

二。后台接口代码：

 /**
     * 上传图片
     * @param file
     * @param request
     * @return
     * @throws IOException
     */
    @RequestMapping("/imageUpload")
    @ResponseBody
    public Object fileUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {

        JSONObject jsonObject=new JSONObject();
        // 1.上传路径
        String path=System.getProperty("user.dir")+"\\src\\main\\resources\\static\\image";

        //得到上传图片的文件名
        String fileName = file.getOriginalFilename();
        String[] s =fileName.split("/");
        //得到该图片的名称
        String imageName=s[0];
        Date date = new Date();
        //格式日期转换
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
        //得到session中对象
        MemberVO memberVO= (MemberVO) request.getSession().getAttribute("member");
        //根据用户id、时间戳以及上传图片名称生成图片名称生成新的图片名称
        String newImageName=(memberVO.getId()).toString()+sdf.format(date)+fileName;
        //生成图片文件
        File targetFile = new File(path, newImageName);
        if (!targetFile.getParentFile().exists()) {
            targetFile.getParentFile().mkdirs();//创建父级文件路径
            targetFile.createNewFile();//创建文件
        }

        //写入磁盘
        try {
            file.transferTo(targetFile);
        } catch (Exception e) {
            e.printStackTrace();
        }

        //返回访问url
        String url="http://localhost:8080/static/image/"+newImageName;
        jsonObject.put("url",url);

        return Result.ok(jsonObject);
    }

三。注意点：

1.有关于前台js中，我们只需要修改自己所需要调用的接口，该upload上传控件会把上传的file自动封装成参数传入后台调用接口：

2.后台接口如果需要返回值的话，可以存入JSONObject对象中，再用返回一个Result.ok()状态码，查看该源代码可知，若返回状态码为0表示该接口被被调用其执行成功：

3.前台需要接受值后台传输的值：

四。完成效果