weui.js upload

weui.js 是一个轻量级的 JavaScript 库，它是基于 WeUI（微信 Web UI）项目开发的，主要用于在微信中构建具有良好用户体验的网页应用。weui.js 提供了一系列组件和模块，以简化微信内网页的开发过程。

weui.js upload 组件

weui.js 中的 upload 组件用于实现文件上传功能，特别是图片上传。它提供了一套简单的 API 和模板，使得开发者可以快速地在微信内实现图片上传功能。

基础概念

选择文件：用户可以通过点击上传按钮选择本地文件。
预览图片：在选择文件后，可以预览选中的图片。
上传文件：将选中的文件上传到服务器。
进度显示：上传过程中可以显示上传进度。
成功回调：上传成功后的回调函数。
失败回调：上传失败后的回调函数。

应用场景

社交应用：在微信内实现用户头像上传、图片分享等功能。
电商应用：实现商品图片上传、用户评价图片上传等。
教育应用：实现作业提交、资料上传等功能。

示例代码

以下是一个简单的 weui.js 上传组件的使用示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WeUI Upload Example</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
</head>
<body>
    <div class="weui-cells__title">图片上传</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传</p>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script>
        var uploader = weui.uploader({
            url: 'your_upload_url', // 上传接口
            auto: true, // 是否在选取文件后立即进行上传
            type: 'file', // 上传类型，默认为'file'
            fileVal: 'file', // 文件上传域的name
            compress: {
                width: 1600,
                height: 1600,
                quality: 0.8
            }, // 可选，压缩图片
            count: 9, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            fileType: ['image'], // 图片类型，默认二者都有
            onSuccess: function (res) {
                var file = res.data;
                var $li = $('<li class="weui-uploader__file"><img src="' + file.url + '" alt=""></li>');
                $('#uploaderFiles').append($li);
            },
            onProgress: function (res) {
                console.log('上传进度', res.progress);
            },
            onError: function (res) {
                weui.topTips('上传失败');
            }
        });
    </script>
</body>
</html>