vue项目打包成app无法使用input调用相机

问题描述:打包成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

 

posted @ 2019-05-14 11:23  zigood  阅读(1823)  评论(0编辑  收藏  举报