vue中使用html5+ 进行图片和视频的上传

出现原因

在以前的H5页面中支持在html5+开发的app中打开，配置异常导致在安卓端只可以调起相册，无法调起摄像机。

处理办法

在h5页面中引入html5+

1. 在vue代码中加入模块 vue-html5plus npm i vue-html5plus -S
2. 配置文件，在main.js 中配置下面的代码

　　var onPlusReady = function (callback, context = this) {
　　　　if (window.plus) {
　　　　　　callback.call(context)
　　 　　} else {
　　　　　　document.addEventListener('plusready', callback.bind(context))
　　　　 }
　　}
　　Vue.mixin({
　　 　　beforeCreate () {
　　　　　　onPlusReady(() => { this.plusReady = true }, this)
　　 　　},
　　　methods: {
　　　　　　onPlusReady: onPlusReady
　　　　}
　　})

3.这是候代码中已经可以使用 plus 方法了

应用

调用摄像头，给证件正反面拍照并上传给后端

以base64格式传给后端

<div class="pic-unit">
      <div class="pic-box" @click="toastEnable('pic1')">
        <span class="edit-ico" v-show="isChooseFront"></span>
        <img src="../assets/frontside.png" v-if="!isChooseFront" />
        <img :src="frontSideShow" alt="" v-else />
      </div>
      <input v-if="yungoche" class="file-btn hidden " @click="frontCarme()" ref="pic1" />
      <input v-if="!yungoche" class="file-btn hidden" type="file" accept="image/*" v-on:change="frontChange($event)" ref="pic1" />
    </div>
  <div class="pic-unit">
      <div class="pic-box" @click="toastEnable('pic2')">
        <span class="edit-ico" v-show="isChooseBack"></span>
        <img src="../assets/backside.png" v-if="!isChooseBack" />
        <img :src="backSideShow" alt="" v-else />
      </div>
      <input v-if="yungoche" class="file-btn hidden" @click="backCarme()" ref="pic2" />
      <input v-if="!yungoche" class="file-btn hidden" type="file" accept="image/*" v-on:change="backChange($event)" ref="pic2" />
    </div>



//显示图片
    showPics(url, name, origin) {
      let _this = this;
      //根据路径读取到文件
      plus.io.resolveLocalFileSystemURL(url, function(entry) {
        entry.file(function(file) {
          var fileReader = new plus.io.FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onloadend = function(e) {
            var picUrl = e.target.result.toString();
            if (origin == 'back') {
              _this.isChooseBack = true;
              _this.backSideShow = picUrl;
              _this.backSide = picUrl;   //传给后端的参数
            } else {
              _this.frontSideShow = picUrl;
              _this.isChooseFront = true;
              _this.frontSide = picUrl; //传给后端的参数
            }
          };
        });
      });
    },
    //压缩图片
    compressImage(url, filename, origin) {
      var _this = this;
      var name = '_doc/upload/' + filename;
      plus.zip.compressImage(
        {
          src: url, //src: (String 类型 )压缩转换原始图片的路径
          dst: name, //压缩转换目标图片的路径
          quality: 40, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
          overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件
        },
        function(zip) {
          //页面显示图片
          _this.showPics(zip.target, name, origin);
        },
        function(error) {
          _this.showToast('压缩图片失败，请稍候再试');
        }
      );
    },
    getCarame() {
      var _this = this;
     var cmr = plus.camera.getCamera(); //调起摄像机
      var res = this.cmr.supportedImageResolutions[0];
      var fmt = this.cmr.supportedImageFormats[0];
        //读取摄像机保存的图片
      _this.cmr.captureImage(
        function(p) {
          plus.io.resolveLocalFileSystemURL(
            p,
            function(entry) {
              _this.compressImage(entry.toLocalURL(), entry.name, 'back');
            },
            function(e) {
              _this.showToast('读取拍照文件错误：' + e.message);
            }
          );
        },
        function(e) {},
        {
          filter: 'image'
        }
      );
    },

拓展

图片转为base64位

  getImgToBase64(url) {
      var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        // callback(dataURL);
        canvas = null;
        this.frontSide = dataURL;
        alert(this.frontSide);
      };
      img.src = url;
    }

调用摄像机拍摄视频，以流的形式上传给后端

 <form v-if="yungoche" method="post" ref="videoform" enctype="multipart/form-data">
      <input class="video-input hidden " accept="video/*" name="faceVideo" id="uploadCaramInput" @click="uploadCaram($event)" @click.stop ref="videobox" />
      <video src class="hidden" id="video"></video>
    </form>
 /**

* @description: base64位图片转码文件流
* @param {type}
*/
    base64toFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split('/')[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      });
    },
    UpLoadVideo(url) {
      let _this = this;
      plus.io.resolveLocalFileSystemURL(url, function(entry) {
        entry.file(function(file) {
          var fileReader = new plus.io.FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onloadend = function(e) {
            var temp = e.target.result;
            var Files = _this.base64toFile(temp);
            let formData = new FormData();
            formData.append('faceVideo', Files);
            _this.$http.post(randomFaceVerifyTypeSubmitUrl, formData, { 'Content-Disposition': 'form-data', 'Content-Type': ' video/mp4' }).then(res => {
             //不清空页面会卡顿，倒计时异常
             fileReader = '';
              temp = '';
              Files = '';
              formData = '';
              //上传视频之后的判断
            });
          };
        });
      });
    },
    //
    uploadCaram() {
      var _this = this;
      if (!_this.source) {
        window.bus.videoAlert.showAlert = false;
      } else {
        window.bus.fail.reAlert = false;
      }
      this.cmr = plus.camera.getCamera();
      this.cmr.startVideoCapture(
        function(p) {
          plus.io.resolveLocalFileSystemURL(
            p,
            function(entry) {
              _this.UpLoadVideo(entry.toLocalURL());
                 if (_this.source == '重新录制') {
                    bus.fail.reUpLoad = true;
                  } else {
                    bus.videoAlert.showUpLoad = true;
                  }
            },
            function(e) {
               _this.showToast('读取录像文件错误：' + e.message);
            }
          );
        },
        function(e) {
          _this.showToast('读取录像文件失败：' + e.message);
        },
        {
          filename: '_doc/camera/',
          index: 1
        }
      );
    },

拓展

base64位图片转为文件流

 /**

* @description: base64位图片转码文件流
* @param {type}
*/
    base64toFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split('/')[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      });
    },