Minio 教程 - Minio WebUploader上传文件的高级用法之进度条显示、文件过滤、图片预览、图片压缩

在使用 Minio 作为后端存储服务时，结合 WebUploader 这类前端上传组件，可以实现复杂的上传功能，比如进度条显示、文件过滤、图片预览和图片压缩。下面是使用 WebUploader 实现这些高级功能的教程概览：

1. 安装与引入 WebUploader

首先，确保在项目中引入 WebUploader 相关的 JS 和 CSS 文件。可以通过 CDN 或者下载到本地项目中引用。

<link rel="stylesheet" href="path/to/webuploader.css">
<script src="path/to/webuploader.js"></script>

2. 初始化 WebUploader

配置 WebUploader 实例时，可以设置各种选项以启用高级功能。下面是一个基本配置示例：

var uploader = WebUploader.create({
    // swf文件路径
    swf: 'path/to/Uploader.swf',
    // 文件接收服务端。
    server: '/minio/upload',
    // 选择文件的按钮。可选。
    pick: '#picker',
    // 自动上传
    auto: true,
    // 文件类型过滤
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    // 文件大小限制
    fileSingleSizeLimit: 2 * 1024 * 1024, // 2MB
});

3. 显示上传进度条

WebUploader 提供了上传进度的事件监听，可以用来显示进度条。

uploader.on('uploadProgress', function(file, percentage) {
    var $li = $('#'+file.id),
        $percent = $li.find('.progress span');

    if (percentage > 0) {
        $percent.text(Math.round(percentage * 100) + '%');
        $percent.css('width', Math.round(percentage * 100) + '%');
    }
});

4. 文件过滤

在初始化配置中使用 accept 属性可以对上传的文件类型进行过滤，上述代码示例已经展示了如何只允许上传图片格式的文件。

5. 图片预览

WebUploader 支持在选择文件后立即显示图片预览。

uploader.on('fileQueued', function(file) {
    var $li = $('<li id="' + file.id + '">' +
                    '<img>' +
                    '<p class="info">' + file.name + '</p>' +
                '</li>'),
        $img = $li.find('img');

    $('#fileList').append($li);

    // 创建图片预览
    uploader.makeThumb(file, function(error, src) {
        if (error) {
            $img.replaceWith('<span>预览错误</span>');
            return;
        }

        $img.attr('src', src);
    }, thumbnailWidth, thumbnailHeight);
});

6. 图片压缩

WebUploader 提供了图片压缩的功能，可以在上传前自动压缩图片以减小文件大小。

uploader.on('beforeUpload', function(file) {
    var options = {
        quality: 0.8, // 压缩质量
        maxWidth: 1024, // 最大宽度
        maxHeight: 1024 // 最大高度
    };
    uploader.compress(file, options);
});

请注意，这里的 compress 方法是假设你已经扩展了 WebUploader 来支持图片压缩功能。如果你使用的是原始的 WebUploader，可能需要自己实现压缩逻辑或者查找是否有社区提供的压缩插件。

以上就是使用 WebUploader 实现 Minio 文件上传高级功能的基本步骤。实际应用中，还需确保后端正确处理预签名URL的生成和文件上传请求。