WebUploader的缩略图如何在后台保存以及下次打开页面时如何展示的问题

Question

大家好，我的使用场景如下：（我觉得比较通用）

用户在需要专家帮忙的时候需要填写文字信息以及上传图片

可上传多图，每选择一个图片无需点击“上传”按钮而自动上传

上传成功后，出现缩略图，在右上角有删除的角标

点击缩略图进行大图预览

＝＝＝＝＝＝＝以上内容都已经磕磕绊绊的实现了＝＝＝＝＝＝＝＝＝

基本是在WebUploader在github上提供的sample修改而来，感觉很满意。

其中，大图预览使用的是amazeui的单张图片预览功能，当然改了下他的css

使用方法为：在uploadSuccess事件中加入如下代码

//上传成功后设置缩略图以及大图预览
        uploader.makeThumb(file, function (error, src) {
            var img;
            if (error) {
                $wrap.text('不能预览');
                return;
            }
            //设置大图打开地址
            relSrc = "/lzqx/upload/showPic/" + response.resid;

            //设置amazeui的单张图片预览效果
            img = $('<figure data-am-widget="figure" class="am am-figure am-figure-custom" data-am-figure="{pureview: 'true'}">' +
                '<img src="' + src + '" data-rel="' + relSrc + '" alt="预览"/>' +
                '</figure>' +
                '<span class="resid">' + response.resid + '</span>');

            $('#' + file.id).find('.imgWrap').html(img);

            //重新初始化,amazeui的大图预览插件(必须)
            $.AMUI.figure.init();

        }, thumbnailWidth, thumbnailHeight);

由于官方的例子是选择若干个文件后最后点击上传，所以文件在加入queue后进行预览，而我这个是随选随传，所以我将图片预览放到了上传成功的事件中。

其中，relSrc为大图预览的url，resid为上传成功后server返回来的图片id，其实就是我自己有一张表叫upload_res的主键，表的每行存着图片路径等信息。

那么问题来了？？？？

当我完成了该页面的编辑并保存退出后，再次进入到该页面，我需要将表单信息以及上传过的图片信息再次展示出来，表单信息肯定可以，但是图片的缩略图没办法展示出来，因为缩略图我没存储。

我看了下其他的上传控件，有的可以同时向后台传递缩略图和原图，但是WebUploader不提供，我估摸着将缩略图的data url按照BLOB形式存储到数据库表中可以实现，也就是我在页面表单填写完毕以及上传文件后，将data url放在form的hidden中，一起传递到后台，然后下次打开页面查看图片等时候直接就可以预览了。

我测试了一下：

原图大小：2MB，缩略图大小：5KB，webuploader压缩后存服务器的图片大小为300KB

ps： 我测试缩略图大小的方法是把dataurl复制到地址栏中就可以打开图片，然后保存文件看大小。

数据库表每行存个5KB的BLOG不知道会不会有问题？

不知道其他朋友是如何解决缩略图存储的？是否我的方法不太对。

Answer 1

遇到 同样问题....  同求开源地址,参考 参考!!  谢谢大神...

Answer 2

遇到 同样问题....  同求开源地址,参考 参考!!  谢谢大神...

Answer 3

回复
@学而 : 李建源,拖欠工资,为何不给?打你电话,为何拉黑?

Answer 4

开源地址在哪里啊

Answer 5

最近也接触到了这样的问题，能分享下展示的代码吗？

Answer 6

经过从上午到现在的研究和测试以及代码的整理，把图片上传整体功能都完成了，解决方案为：

后台用thumbnailator来实现server端的缩略图生成, 当再次编辑的时候，从先展示缩略图，用户点击缩略图然后放服务器发请求看大图，呵呵，终于可以把我以前自己写的iframe版的单张图片无刷新上传替换掉了。

回来再完善完善，弄成git项目进行开源，真是开箱即用，爽歪歪～

Answer 7

恩，如果缩略图再存一次，那么看一张图片需要2个请求，我现在正在尝试客户端即时生成缩略图，用的jqthumb，呵呵，一会儿发布结果

Answer 8

其实存2个图片比较好，第一次加载缩略图会很快，如果用户感兴趣通过点击查看大图，再发送一个请求给服务器查看大图。那么我需要研究java生成缩略图的方法

Answer 9

图片不要存到数据库里面····存路径···

WebUploader.create 有一个 auto 、server 配置项，可以自动上传至服务端，之后图片既然上传到服务端了，缩略图这一部分不就是你这边自己可以控制的了·

Answer 10

谢谢，没事，我继续查，这种系统中的基础功能做出来还是比较麻烦的，得花时间，不过出来以后复用就爽多了，虽说技术含量不高，但也得有人干

Answer 11

回复
恩 我之前给图片上传加了个记录旋转角度 搞醉了 最近弄修改图片的时候控制图片上传的数量

Answer 12

题主这个问题没搞过缩略图 一般修改的适合就把图片url展示成了指定大小的了，之前也搞过这个控件 感觉还是没玩透，不过确实帮忙做了很多事情