您现在的位置是:网站首页>>前端技术>>weui

weui实现图片上传

发布时间:2019-04-30 16:37:17作者:wangjian浏览量:1475点赞量:0

    在weui中有现成的Uploader上传组件

    实现如下:

    <div class="weui-cells weui-cells_form" id="uploader">
        <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 class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                            <li class="weui-uploader__file" style="background-image:url(./text.jpeg)"></li>  <!--默认图片-->
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var uploadCount = 0;
        weui.uploader('#uploader', {
            url: 'XXXX',//上传的url,返回值需要使用json格式
            auto: true,//设置为true后,不需要手动调用上传,有文件选择即开始上传
            type: 'base64', //上传类型, file为文件上传; base64为以base64上传
            fileVal: 'fileVal',//文件上传域的name
            compress: {     //压缩配置, false则不压缩
                width: 1600,//图片的最大宽度
                height: 1600,//图片的最大高度
                quality: .8 //压缩质量, 取值范围 0 ~ 1
            },
            //文件添加前的回调,return false则不添加
            onBeforeQueued: function(files) {
                // `this` 是轮询到的文件, `files` 是所有文件
                if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
                    weui.alert('请上传图片');
                    return false; // 阻止文件添加
                }
                if(this.size > 10 * 1024 * 1024){
                    weui.alert('请上传不超过10M的图片');
                    return false;
                }
                if (files.length > 5) { // 防止一下子选择过多文件
                    weui.alert('最多只能上传5张图片,请重新选择');
                    return false;
                }
                if (uploadCount + 1 > 5) {
                    weui.alert('最多只能上传5张图片');
                    return false;
                }
                ++uploadCount;
                // return true; // 阻止默认行为,不插入预览图的框架
            },
            //文件添加成功的回调
            onQueued: function(){
                console.log(this);
                // console.log(this.status); // 文件的状态:'ready', 'progress', 'success', 'fail'
                // console.log(this.base64); // 如果是base64上传,file.base64可以获得文件的base64
                // this.upload(); // 如果是手动上传,这里可以通过调用upload来实现;也可以用它来实现重传。
                // this.stop(); // 中断上传
                // return true; // 阻止默认行为,不显示预览图的图像
            },
            //文件上传前调用
            onBeforeSend: function(data, headers){
                console.log(this, data, headers);
                // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
                // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
                // return false; // 阻止文件上传
            },
            //上传进度的回调
            onProgress: function(procent){
                console.log(this, procent);
                // return true; // 阻止默认行为,不使用默认的进度显示
            },
            //上传成功的回调
            onSuccess: function (ret) {
                console.log(this, ret);
                // return true; // 阻止默认行为,不使用默认的成功态
            },
            //上传失败的回调
            onError: function(err){
                console.log(this, err);
                // return true; // 阻止默认行为,不使用默认的失败态
            }
        });
    </script>

    现象如下:

    image.png

0 +1