layui上传图片到服务器的非项目目录下

1、layui没办法与form表单中的其他字段一同提交到后台，所以只能通过先提交图片，然后通过返回的图片的值来提交到数据库

2、先将所需要的jar包导入，我是用的maven所以，需要在父pom.xml文件中添加下面两个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>

3、然后编写前台页面

如果只需要上传一张图片可以看上传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">&#xe67c;</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">&#xe67c;</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>

4、因为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;
}

5、这就是图片上传的步骤