layui框架图片上传至服务器

注意：只可用于数据量较小的项目，数据量庞大的项目不要用这个，否则会造成图片数量庞大，至服务器运行速度变慢或瘫痪

　　HTML代码

//前端使用的是layui框架
<div class="layui-form-item">
        <div class="layui-input-block">
            　　　　<!-- 上传按钮 -->
            <button type="button" class="layui-btn" id="uploadPic"><i class="layui-icon"></i>选择图片</button>
            <button type="button" class="layui-btn layui-btn-warm" id="uploadPicBtn">开始上传</button>
            　　　　<!-- 隐藏的input,一个隐藏的input（用于保存文件url） -->
            　　　　<input type="hidden" id="img_url" name="img" value=""/>
            　　　　<!-- 预览区域 -->
            <div class="layui-upload-list">
                　　　　　　<img class="layui-upload-img" width="100px" height="80px" id="preShow"/>
                　　　　　　<p id="demoText"></p>
            </div>
        </div>
    </div>

　　JS代码

//上传图片
var uploadInst = upload.render({
    elem: '#uploadPic' //绑定元素
    , url: '/uploadFile' //上传接口 [[@{/upload/img}]]
    , auto: false
    , exts: 'doc|docx|pdf|jpg|jpeg|png|zip|'//图片格式
    , bindAction: '#uploadPicBtn'//点击选择图片,会弹出window弹窗
    ,size:50 //文件上传的大小,一定要设置
    , before: function (obj) {
        //预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
            $('#preShow').attr('src', result); //图片链接（base64）
        });
    }
    , done: function (res) {
        //上传失败
        if (res.code > 0) {
            return layer.msg('上传失败');
        }
        //上传成功
        if (res.code == 0) {
            $('#aftershow').attr('src', "/uploadFile/" + res.data);
            document.getElementById("img_url").value = res.data;
            return layer.msg('上传成功');
        }

    }
    , error: function (re) {
        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();
        });
    }
});

　　Controller代码

//前端选择图片 传入后端,修改名字保存进数据库
    @RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
    @ResponseBody
    public Map uploadPicture(@RequestParam("file") MultipartFile file) {
        Map<String, Object> res = new HashMap<>();
        File targetFile = null;
        //返回存储路径
        String url = "";
        //获取文件名加后缀
        String fileName = file.getOriginalFilename();
        if (fileName != null && fileName != "") {
            //文件临时存储位置到target路径上，保证上传不用重启就能看到
            String path = ClassUtils.getDefaultClassLoader().getResource("static").getPath() + File.separator + "images";
 
            //文件后缀
            String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
            //最后的文件名
            fileName = System.currentTimeMillis() + "_" + new Random().nextInt(1000) + fileSuffix;
 
            //获取文件夹路径
            path = path + File.separator;
            File file1 = new File(path);
            //如果文件夹不存在则创建
            if (!file1.exists() && !file1.isDirectory()) {
                file1.mkdirs();
            }
            //将图片存入文件夹
            targetFile = new File(file1, fileName);
            try {
                //将上传的文件写到服务器上指定的文件。
                file.transferTo(targetFile);
                //本项目所在位置D:\CRM-Test\code\honda-project-all
                String projectPath = System.getProperty("user.dir");
                //文件复制
                String src = path + fileName;
                //web项目实际路径D:\CRM-Test\code\honda-project-all\honda-web\src\main\resources\static\images
                String destDir = projectPath + File.separator + "honda-web" + File.separator + "src" + File.separator + "main" + File.separator + "resources" + File.separator + "static" + File.separator + "images" + File.separator;
                //文件上传读取
                copyFile(src, destDir, fileName);
                //数据库只存名字
                url = fileName;
                res.put("data", url);
                res.put("code", "0");
                res.put("msg", "");
                return res;
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return res;
    }

　　文件上传读取

/**
     * 文件复制
     *
     * @param src
     * @param destDir
     * @param fileName
     * @throws IOException
     */
    public void copyFile(String src, String destDir, String fileName) throws IOException {
        FileInputStream in = new FileInputStream(src);
        File fileDir = new File(destDir);
        if (!fileDir.isDirectory()) {
            fileDir.mkdirs();
        }
        File file = new File(fileDir, fileName);
 
        if (!file.exists()) {
            file.createNewFile();
        }
        FileOutputStream out = new FileOutputStream(file);
        int c;
        byte buffer[] = new byte[1024];
        while ((c = in.read(buffer)) != -1) {
            for (int i = 0; i < c; i++) {
                out.write(buffer[i]);
            }
 
        }
        in.close();
        out.close();
    }

　　前端点击查看服务器上的图片

<script type="text/html" id="herfFormalUrl">
    <a href="{{'http://localhost:8080/static/images/'+d.pictureUrl}}" class="layui-table-link">查看</a>
</script>

　　动态表格超链接查看图片

　　　　//图片库表格
        var goodtable = table.render({
            elem: '#demo'
            , url: '/getPicture' //数据接口
            , page: true //开启分页
            , limit: 10
            , limits: [10]
            , cols: [
                [ //表头
                    {checkbox: true, fixed: 'left'}
                    , {field: 'tmPictureId', title: '编号', width: 100, sort: true, fixed: 'left'}
                    , {field: 'pictureNo', title: '图片编号', width: 120}
                    , {field: 'pictureName', title: '图片名称', width: 120, sort: true}
                    , {field: 'proPictureName', title: '图片类型', width: 120}
                    , {field: 'carseriesNo', title: '车系', width: 120}
                    , {field: 'featureNo', title: '机种', width: 120, sort: true}
                    , {field: 'pictureUrl', title: '图片浏览', width: 120, sort: true, templet: '#herfFormalUrl'}//表格中点击查看图片的超链接
                    , {field: 'createTime', title: '创建时间', width: 180, sort: true}
                    , {field: 'remark', title: '备注', width: 228, sort: true}
                ]
            ]
        });