Minio入门系列【15】WebUploader上传文件的高级用法之进度条显示、文件过滤、图片预览、图片压缩

港控/mmm° 2023-10-09 13:36 32阅读 0赞

深入了解请参考[官网][Link 1]详细说明

### 进度条显示 ###

使用进程文件上传时，进度条显示是一个常用的功能，而WebUploader组件也是支持的。

文件上传中，Web Uploader会对外派送uploadProgress事件，其中包含文件对象和该文件当前上传进度。

我们这里只需要在JS中添加以上事件就可以了。

// 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
        
            let $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');
    
            // 避免重复创建
            if (!$percent.length) {
        
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }
    
            $li.find('p.state').text('上传中(' + ((percentage * 100).toFixed(2) + '%') + ')');
            $percent.css('width', percentage * 100 + '%');
        });

注意，这里有一个坑，进度条的样式需要自己配置，所以要在webuploader.css文件中添加以下CSS样式。

.progress {
        
    	height: 20px;
    	margin-bottom: 20px;
    	overflow: hidden;
    	background-color: #f5f5f5;
    	border-radius: 4px;
    	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    }
    .progress.active .progress-bar {
        
    	-webkit-animation: progress-bar-stripes 2s linear infinite;
    	animation: progress-bar-stripes 2s linear infinite;
    }
    
    .progress-striped .progress-bar {
        
    	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    	background-size: 40px 40px;
    }
    .progress-bar {
        
    	background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
    	background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
    	background-repeat: repeat-x;
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff428bca’,endColorstr=’#ff3071a9’,GradientType=0);
    }
    .progress-bar {
        
    	float: left;
    	height: 100%;
    	font-size: 12px;
    	line-height: 20px;
    	color: #fff;
    	text-align: center;
    	background-color: #428bca;
    	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    	transition: width .6s ease;
    }

点击上传，进度条就成功显示了  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg_size_20_color_FFFFFF_t_70_g_se_x_16]

### 文件过滤 ###

文件过滤可以对添加的文件类型进行限制，比如只能上传图片，这也是一个常用的功能。

实际使用时，只需要在初始化uploader时，添加accept配置就可以了。比如以下代码表示，只能添加图片。

点击选择文件，发现只能选择图片类型。就算选择到了非图片类型，也无法添加到上传队列中。  
![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 图片预览 ###

WebUploader支持在添加图片后，展示预览图。监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。 注意这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

这里我们添加一个fileQueued事件。

// 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
        
            // 缩略图大小
            var ratio = window.devicePixelRatio || 1;
            var thumbnailWidth = 100 * ratio;
            var thumbnailHeight = 100 * ratio;
            var $ = jQuery;
            var $list = $('#list');
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            // $list为容器jQuery实例
            $list.append($li);
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
        
                if (error) {
        
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });

然后点击选择文件，预览图效果就出来了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg_size_15_color_FFFFFF_t_70_g_se_x_16]

### 图片压缩 ###

支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。

解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。

只需要在初始化添加compress，配置压缩的图片的选项。如果此选项为false, 则图片在上传前不进行压缩。

比如以下代码表示对图片进行压缩。

// 初始化Web Uploader
        const uploader = WebUploader.create({
        
            // swf文件路径
            swf: 'static/Uploader.swf',
            server: '/minio/upload',// 文件接收服务端。
            pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
            method: 'POST', // 文件上传方式，POST或者GET，默认Post
            resize: false,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            compress:
                {
        
                    width: 100,
                    height: 100,
                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 50,
                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: false,
                    // 是否允许裁剪。
                    crop: false,
                    // 是否保留头部meta信息。
                    preserveHeaders: true,
                    // 如果发现压缩后文件大小比原来还大，则使用原来图片
                    // 此属性可能会影响图片自动纠正功能
                    noCompressIfLarger: false,
                    // 单位字节，如果图片大小小于此值，不会采用压缩。
                    compressSize: 0
                }
        });

然后在页面上上传一个170K的文件：  
![在这里插入图片描述][0ac45aa6b0454f7288ecbf13cae5ae0c.png]  
然后登录Minio，发现图片被压缩到了2.4k。  
![在这里插入图片描述][dcf604a21c5749108ab8896c0389e70b.png]

[Link 1]: http://fex.baidu.com/webuploader/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/669514427b1346baa979639e2c1df506.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/b6afbd04cbd84cb187f5b0e2f1019cd8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f6d15471eb0244a4bf2df1c4e8c72c34.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Of5oiQ6ZuoY3Nkbg==,size_15,color_FFFFFF,t_70,g_se,x_16
[0ac45aa6b0454f7288ecbf13cae5ae0c.png]: https://img-blog.csdnimg.cn/0ac45aa6b0454f7288ecbf13cae5ae0c.png
[dcf604a21c5749108ab8896c0389e70b.png]: https://img-blog.csdnimg.cn/dcf604a21c5749108ab8896c0389e70b.png