Dcloud+mui 压缩上传图片到服务器

• chooseImgFromAlbums选择图片
• chooseImgFromPictures 拍照
• changeToLocalUrl 转换成可用的路径
• uploadpic.compressImg 压缩图片
• uploadpic.avatar 上传图片到oss服务器

    /**
     * 上传图片
     */
    function UPLOADPIC() {
        //上传图片
        this.avatar = function(compressurl) {
            bzpcommon.showLoading();
            //上传的参数
            var uploadoptions = {
                method: "post",
                timeout: 30,
                retry: 3,
                retryInterval: 10,
            };
            //创建上传任务
            var task = plus.uploader.createUpload(bzpapi.API("FILE_UPLOAD"), uploadoptions, function(t, status) {
                //关闭loading
                bzpcommon.closeWaiting();
                // 上传完成
                if(status == 200) {
                    var body = JSON.parse(t.responseText);
                    if(body.retCode === "SUCCESS") {
                        $.toast("上传头像成功");
                        $(".bzp-avatar")[0].src = compressurl;
                        //更新个人信息
                        //                      get_customer_detail();
                    } else if(body.retCode === "FAIL") {
                        $.toast(body.info.message);
                    } else {
                        $.toast("上传头像失败");
                    }
                } else {
                    $.toast("上传头像失败");
                }
                console.log("----图片上传返回值---");
                console.log(JSON.stringify(t));
            });
            task.addFile(compressurl, {
                key: "file"
            });
            task.addData("token", bzpcommon.user.token());
            task.start();
        };
        //压缩
        this.compressImg = function(src) {
            var filename = src.substring(src.lastIndexOf('/') + 1);
            var opions = {
                src: src,
                dst: '_doc/' + filename,
                overwrite: true,
                width: '300px', //这里指定了宽度，同样可以修改
                format: 'jpg',
                quality: 90 //图片质量不再修改，以免失真
            };
            var _this = this;
            //show loading
            bzpcommon.showLoading();
            var successCB = function(evt) {
                console.log(JSON.stringify(evt));
                //上传头像
                _this.avatar(evt.target);
            };
            var errorCB = function(err) {
                console.log(JSON.stringify(err));
                bzpcommon.closeWaiting();
                $.toast("图片压缩失败");
            };
            plus.zip.compressImage(opions, successCB, errorCB);
        };
    };
    var uploadpic = new UPLOADPIC();
    //转换为本地路径
    function changeToLocalUrl(path) {
        plus.io.resolveLocalFileSystemURL(path, function(entry) {
            STATE.uploadPic = entry.toLocalURL();
            $(".bzp-avatar")[0].src = STATE.uploadPic;

            console.log(STATE.uploadPic);
            uploadpic.compressImg(STATE.uploadPic);

        });
    }

    //选择图片
    function chooseImgFromAlbums() {
        plus.gallery.pick(function(file) {
            changeToLocalUrl(file);
        }, function(err) {
            console.log(JSON.stringify(err));
            $.toast("选择图片失败");
        }, {
            filter: 'image',
            multiple: false
        });
    }

    //拍照
    function chooseImgFromPictures() {
        plus.camera.getCamera().captureImage(function(file) {
            changeToLocalUrl(file);
        }, function(err) {
            console.log(JSON.stringify(err));
            $.toast("选择图片失败");
        }, {
            index: '1',
        });
    }

作者：我的昵称好听吗

链接：https://www.jianshu.com/p/0a3ffccb2f11

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。