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
來源：簡書
簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。