springboot maven+layui上传文件

layui上传文件常用的两种调用方法：

1.调用本地项目的 controller 的方法

2.调用远程服务器封装好的文件上传接口

两种方法都是先调用方法/接口返回图片的 url，再把图片的 url 填进伪 input 中，最后和 from 表单一并提交到后台存储数据库。

方法一：调用本地项目的 controller 的方法

页面编写：

<div class="layui-form-item">
    <label class="layui-form-label">照片</label>
    <div class="layui-input-block">				  
        <!-- 上传按钮 -->
        <button type="button" class="layui-btn" id="upload1">上传图片</button>
        <!-- 隐藏的input -->
        <input type="hidden" id="msgImgs" name="msgImgs" value=""/>
        <!-- 预览区域 -->
        <div id="imgDiv" class="layui-upload-list" style="display: none;">
            <img class="layui-upload-img" width="100px" height="80px" id="demo1" name="msg"/>
            <p id="demoText"></p>
        </div>			            
    </div>
</div>

layui.use('upload', function(){
	var upload = layui.upload
	, $ = layui.$;
	var uploadUrl = UploadURL; 
	var uploadInst = upload.render({
	    elem: '#upload1' //绑定元素
	    ,url: uploadUrl //上传接口
	    ,before: function(obj){
	        //预读本地文件示例
	        obj.preview(function(index, files, result){
	            $('#demo1').attr('src', result); //图片链接（base64）
	        });
	    }
	    ,done: function(res){
	         //如果上传失败
	         if(res.statusCode == 200){
	             //上传成功
	             layer.alert("上传成功"+res.url);
	             document.getElementById("msgImgs").value = res.url;
	             $("#imgDiv").css("display","")// 显示图片框
	         } else {
	             return layer.msg('上传失败');
	         }
	     }
	     ,error: function(){
	         //演示失败状态，并实现重传
	         var demoText = $('#demoText');
	         demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
	         demoText.find('.demo-reload').on('click', function(){
	             uploadInst.upload();
	         });
	      }
     }); 
});

效果图：

后台编写：这里为了理清思路没有做 uuid 操作

@RequestMapping(value = "/upload/img", method = RequestMethod.POST)
public Map<String, Object> upload(HttpServletRequest servletRequest, @RequestParam("file") MultipartFile file)
			throws IOException {
	// 如果文件内容不为空，则写入上传路径
	if (!file.isEmpty()) {
		// 上传文件路径
		String UploadPath = "...";
		// 上传文件名
		String filename = file.getOriginalFilename();
		File filepath = new File(UploadPath, filename);
		// 判断路径是否存在,没有创建
		if (!filepath.getParentFile().exists()) {
			filepath.getParentFile().mkdirs();
		}
		// 将上传文件保存到一个目标文档中 
		File file1 = new File(UploadPath + File.separator + filename);
		file.transferTo(file1);
		Map<String, Object> res = new HashMap<>();
		// 返回的是一个url对象
		res.put("url", file1);
		return res;
	} else {
		return null;
	}
}

方法二：调用远程服务器封装好的文件上传接口

只需要页面的修改，不需要自己编写后台：

设定文件域的字段名 fromdata：如果远程的参数为file则不需要修改，否则在参数中添加 field ，修改文件上传参数绑定；

直接添加远程的接口。

,field: "files" // 远程参数的名称
,url: "http://....../upFile" //上传接口

远程接口的请求头 fromdata 信息：

这里要注意远程接口的返回参数，有的是状态码是code，有的是statusCode

if(res.statusCode == 200){
    //上传成功
	layer.alert("上传成功"+res.data);
	document.getElementById("msgImgs").value = res.data;
	$("#imgDiv").css("display","")// 显示图片框
} else {
	return layer.msg('上传失败');
}

剩下的事情就是编写后台接收 from 表单的数据并存数据库的事情了，这里就不作介绍了。

 

参考资料：图片/文件上传 - layui.upload https://www.layui.com/doc/modules/upload.html