1. 程式人生 > >vue項目打包成app無法使用input調用相機

vue項目打包成app無法使用input調用相機

api 返回 項目打包 catch 描述 utl class 做到 app

問題描述:打包成app後使用input上傳圖片只能做到在文件夾中選取,不能實現拍照上傳圖片

解決方案:

  1.利用HTML5 Plus的Camera調用相機

  2.利用HTML5 Plus的IO來實現讀取拍照所得的圖片文件

  3.使用base64上傳圖片

clickInputLoader() {
      let _this = this
      if (~navigator.userAgent.indexOf("Html5Plus")) {
        let plusReady = function(callback) {
          if (window.plus) {
            callback();
          } else {
            document.addEventListener("plusready", callback);
          }
        };
        plusReady(function() {
          let camera = plus.camera.getCamera(); // 調用相機
          camera.captureImage(
            function(filePath) {
              plus.io.resolveLocalFileSystemURL( // 通過URL參數獲取目錄對象或文件對象
                filePath,
                function(entry) {
                  _this.lodingShow = true;
                  let reader = null
                  entry.file(function(file) {
                    let sizeJudge = false;
                    sizeJudge = _this.checkSize(file.size);
                    if (sizeJudge === false) {
                      return;
                    }
                    reader = new plus.io.FileReader(); // 文件系統中的讀取文件對象,用於獲取文件的內容
                    reader.onload = function(e) {
                    }
                    reader.readAsDataURL(file);
                    reader.onloadend = function(e) {
                      let dataBase = e.target.result; // 獲取Base64,FileReader()返回
                      uploadImgBase64({ //調用上傳接口
                        file:dataBase
                      })
                        .then(res => {
                          if (res.data.code === 200) {
                            _this.lodingShow = false;
                            _this.alertVal = "圖片上傳成功";
                            _this.showPluginAuto();
                          } else {
                            _this.lodingShow = false;
                            _this.alertVal = res.data.msg;
                            _this.showPluginAuto();
                          }
                        })
                        .catch(() => {
                          _this.lodingShow = false;
                          _this.alertVal = "圖片上傳失敗!";
                          _this.showPluginAuto();
                        });
                    },function (e) {
                      alert( e.message );
                    } ;
                  });
                  reader.abort();
                },
                function(e) {
                  plus.nativeUI.toast("讀取拍照文件錯誤:" + e.message);
                }
              );
            },
            function() {
              alert("拍照失敗");
            }
          );
        });
      }
    },

  

  具體使用方式查看文檔:http://www.dcloud.io/docs/api/zh_cn/io.html

vue項目打包成app無法使用input調用相機