本文介绍如何使用Layui组件将图片上传至服务器指定目录而非项目内部。通过Maven引入依赖，配置前端JS逻辑以支持手动触发上传，后端采用Spring MVC接收MultipartFile并处理文件流，最终返回路径供前端回显。
Layui图片上传至非项目目录的实现方案
由于Layui组件无法与form表单中的其他字段直接合并提交至后台，因此需要采取分步策略：首先单独提交图片文件，获取返回的文件标识或路径后，再将该值与其他表单数据一同提交至数据库。
Maven依赖配置
在Maven项目中，需在父级pom.xml文件中引入必要的依赖库。具体需添加commons-fileupload和commons-io两个jar包，版本号可根据实际需求自行选定。
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>前端页面与JS逻辑
接下来需编写前端页面代码，以支持图片选择与上传交互。
若业务仅需上传单张Logo图片，可参考“上传logo”的实现步骤；若涉及多张图片上传，则需参考“上传图片”的相关逻辑。
<div>
<label class="layui-form-label">logo</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadLogo">
<i class="layui-icon"></i>选择logo
</button>
<div class="layui-upload-list">
<!-- 为了回显 -->
<img class="layui-upload-img" id="upload-logo" width="150px" src="${educationalType.edLogo}">
</div>
<button type="button" class="layui-btn" id="submit_logo">开始上传
</button>
<input id="logoText" name="edLogo" type="hidden" />
</div>
</div>
<div>
<label class="layui-form-label">图片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadImage">
<i class="layui-icon"></i>选择图片
</button>
<div class="layui-upload-list" id="imageView">
<c:if test="${pageFlag == 'updatePage' and educationalType.edImage1 != null}">
<img class="layui-upload-img" id="upload-image1" width="150px" src="${educationalType.edImage1}" >
</c:if>
<c:if test="${pageFlag == 'updatePage' and educationalType.edImage2 != null}">
<img class="layui-upload-img" id="upload-image2" width="150px" src="${educationalType.edImage2}">
</c:if>
</div>
<button type="button" class="layui-btn" id="submit_image">开始上传</button>
<input id="imageText" name="edImage" type="hidden" />
</div>
</div>页面中的input隐藏域与img标签主要用于接收后端返回的文件路径或状态，从而在最终提交表单时，能够将图片信息一并上传至后台。
<script type="text/javascript">
//上传logo
layui.use('upload', function(){
var $ = layui.jquery,
upload = layui.upload;
//选完文件后不自动上传
upload.render({
elem: '#uploadLogo',
url: '${ctx}/upload/uploadLogoToServer.do',
auto: false,
//multiple: true,
choose: function(obj){
console.log(obj)
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#upload-logo').attr('src', result); //图片链接（base64）
$("#img_url").attr('value',result);
});
},
bindAction: '#submit_logo',
done: function(res){
$("#logoText").attr('value',res.url);
console.log(res)
return layer.msg(res.msg,{icon: res.status,time: 2000});
}
});
//上传图片
var fileCount = 0;//控制文件数量
var maxFileCount = 2;//文件上传最大数量，如果没有限制上传文件的数量则不需要
var maxFileSize = 20;//文件上传最大大小
var resultValue = 0;
var url = "";
upload.render({
elem: '#uploadImage',
url: '${ctx}/upload/uploadImageToServer.do',
auto: false,
//multiple: true,
choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//layer.load();
console.log(obj)
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
fileCount++;
if(fileCount>maxFileCount){
fileCount = maxFileCount;
layer.msg('文件数量不得超过'+maxFileCount+'个',{icon:2});
return;
}
//在当前ID为“imageView”的区域显示图片
$('#imageView').append('<img name = "edImage" ' +
'style="width: 150px; margin-left: 8px;" ' +
'src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
},
bindAction: '#submit_image',
done: function(res){
if(resultValue < 2){
url = url + res.url + ",";
}
if(resultValue == 1){
$("#imageText").attr('value',url);
}
resultValue++;
console.log(res)
return layer.msg(res.msg,{icon: res.status,time: 2000});
}
});
});
</script>
后端处理与回显逻辑
Layui在上传多张图片时，会通过多次请求依次传递数据，导致后端接收到的数据是逐条处理的。若需在前端实现图片回显，必须在后端代码中进行路径拼接，否则可能仅返回最后一张图片的信息。
后端控制器方法命名为UploadCollect，用于处理图片上传请求。
@RequestMapping(value = "/uploadImageToServer.do")
@ResponseBody
public ResultMsg insertImageToEducational(@RequestParam(value = "file")MultipartFile[] files) throws Exception {
ResultMsg msg = new ResultMsg();
String url = "";
for (int i=0,length = files.length; i < length; i++) {
if(files[i] != null && !files[i].isEmpty()) {
//获取路径，路径我写的是固定路径，直接映射到服务器根目录下的/usr/Images/logo
String upload_path = IMAGE_ROOT_URL;
String upload_fileName = FileUpload.uploadFile(files[i], upload_path);
msg.setStatus(0);
url = url + upload_fileName;
}else {
msg.setStatus(1);
msg.setMsg("上传失败");
msg.setUrl("给一个失败的图片路径");
return msg;
}
}
msg.setStatus(1);
msg.setMsg("上传成功");
msg.setUrl(url);
return msg;
}
具体的文件上传逻辑封装在FileUpload类中，负责文件的读写操作。
public static String uploadFile(MultipartFile multipartFile, String path) throws Exception {
File file = new File(path);
if (!file.exists()) {
file.mkdirs();
}
FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream();
String fileName = UUID.randomUUID() + multipartFile.getOriginalFilename();
BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path + File.separator + fileName));
byte[] bs = new byte[1024];
int len;
while ((len = fileInputStream.read(bs)) != -1) {
bos.write(bs, 0, len);
}
bos.flush();
bos.close();
return fileName;
}上述步骤构成了完整的图片上传流程，涵盖从前端选择到后端存储的全过程。
以上即为Layui上传图片至服务器非项目目录的完整实现方案，供开发者参考。