ssm+layui实现图片的上传与读取

ssm+layui实现图片的上传与读取

图片上传确实是一个项目比较核心的技术，我的项目并没有用到传统的富文本上传，而是将图片先热部署到tomcat，在上存储到数据库，读取的时候同样使用此方法。

图片上传

1.设置存放图片的img，以及事件按钮

    <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>食品图片
            </label>
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="image">
                </div>
                <label class="layui-form-label">
                    <span class="x-red"></span>
                </label>
                <button type="button" class="layui-btn" id="foodimage1">上传图片</button >
            </div>
        </div>

2.上传与预读

var foodimage='';//全局变量，负责获取相应字段的值
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#foodimage1'
            , url: '/pushingdata/foodimageup' //改成您自己的上传接口
            ,before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#image').attr('src', result); 
                });
            }
            , done: function (res) {
                foodimage=res.data.src;
                //这个就是个消息提示方法可写 可不写
                layer.msg('上传成功', {icon: 6});
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                layer.msg("上传失败，请重试！", {icon: 5});
            }
        });
    });

3.后台接口

   //上传图片
    @RequestMapping("foodimageup")
    @ResponseBody
    public Map<String, Object> up(MultipartFile file) {
        Map<String, Object> map = new HashMap<String, Object>();
        Map<String, String> data = new HashMap<String, String>();
        //设置图片保存的本地路径  前缀路径
        //之前设置Tomcat的imgages路径
        String filePath = "D:\\test\\Business_card_system\\web\\static\\image\\";
        // 获取原始图片的扩展名
        String originalFilename = file.getOriginalFilename();
        // 使用uuid生成文件新的名字
        String newFileName = UUID.randomUUID() + originalFilename;
        //.replace("-", "");去掉UUID的 - 这步可以不写，我不喜欢uuid的 - 符号，所以就去掉了
        newFileName = newFileName.replace("-", "");
        // 封装上传文件位置的全路径就是前缀加上文件名称
        File targetFile = new File(filePath, newFileName);
        try {
            //保存图片，这里会抛一个异常
            file.transferTo(targetFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        map.put("code", 0);
        map.put("msg", "");
        map.put("data", data);
        data.put("src", "http://localhost:8080/image/" + newFileName);
        return map;
    }

图片读取

1.图片读取相对简单，后台返回的是一个数组，前台直接读取即可

<img class="image" src="" id="image1">

$('#image1').attr('src', data[0].buyimage);

这里有需要注意的只有数组获取值得形式

好了，图片的操作基本完成，待项目完成会把完整项目分享出来。