一、前言

很久没有更新文章了，主要是因为这几个月新入职了一个公司，整个项目组本来有两个前端，但是现在只有我一个前端，负责一个PC端项目和一个H5端的项目以及一个ipad端的项目，项目比较多事也多，所以就没啥时间来更新。为啥今天突发奇想来写文章呢，主要还是因为遇到了一个有点头疼的东西，所以想来记录分享一下（其实是主管去医院了哈哈哈摸摸鱼）

二、问题

这个问题主要是H5中调用相机和相册的一个需求，在接到需求后我第一个想的就是用input标签来写，因为需求是想要同时可以调用相册和相机，就需要在input里面加上multiple和accept这两个属性，具体代码如下：

            <input
              ref="fileInput"
              :key="Math.random()"
              @change="cardImgChange"
              id="front"
              type="file"
              multiple
              style="display: none"
              :accept="!isApp ? 'image/*' :  '.png, .jpg, .jpeg'"
            />

图片.png

具体实现的功能就是点击上传图像可以弹出相册和相机两个选项然后拍照和相册的功能，但是我写下这个之后发现他只能调用相册，不能调用相机。刚开始的时候我在网上找了好多，大部分解答都是说是因为在capture后面加了camera，把他删除就行。但是我这里其实就是这么写的。然后我就只能从点击的方法里面去找，看是不是有什么方法把相机禁用了。整个section是这样的

        <section class="file-item add-content" @click="add" v-if="files.length<80">
            <div class="add"></div>
            <span
              style="color:#ccc;"
              class="addPic"
              v-html="files.length>0?files.length+'/'+limit:'添加图片'"
            >添加图片</span>
            <input
              ref="fileInput"
              :key="Math.random()"
              @change="cardImgChange"
              id="front"
              type="file"
              multiple
              style="display: none"
              :accept="!isApp ? 'image/*' :  '.png, .jpg, .jpeg'"
            />
          </section>

方法下面我有进行一个安卓和ios的判断，因为这是一个H5镶在APP里面的一个项目，所以用到了原生的方法，但是其实也没有用到于调用相册和相机的方法，只有对图片的转换和压缩

 if (this.plat == "ios") {
        let subNum = self.limit - self.files.length;
        if (systemcode == "08") {
          window.webkit.multiablePhotos.postMessagees(
            nativePrams
          );
          window.multiableFunctions = function(obj) {
            let imgList = obj.imgArr;
            if (utils.common.isArray(imgList) && imgList.length > 0) {
              self.editPic("ios", imgList);
            }
            // self.insertPic("ios", obj.imgArr);
          };

截取一部分看一下，我想到了这里应该是要对input进行触发的，就在里面加了

 this.$refs.fileInput.click();

结果你们猜怎么着，默认还是打开相册，但是退出相册后他竟然显示了相册和相机的弹框，我就纳闷了，开始不弹到后面才弹，我就想着是不是手机把相机的权限给禁用了，我就把这个app的权限全部打开然后让两个测试同事都测了一下ios和android端，结果还是不行。最后的最后，我的项目老大就跟我联系的原生那边的前端，问了一下看他们那边是不是摄像头有单独的方法禁用了。害，问了几天人家才搭理我，不过好在大佬还蛮好沟通的，我就给他看了一下我的方法，调的都是没问题的，input框里面的也是没问题的，然后他就给了我一个openTocamera的方法。结果一试就好了。就加这么一个原生的方法我硬是找了好久，看来有的时候就得多问问，早问早解决，不过对H5中调用相册和相机的方法通过这几天的摸索还是清晰了很多

 // 最后就是在add里面加了这两句就over了
this.$refs.fileInput.click();
window.openTocamera()

三、结尾

好了今天的摸鱼时间就快要结束了，记录这个问题也是觉得有的时候遇到问题没路子，还是要多问一下，关于H5端的代码里面还是比较考验基本功的，而且这只是一个模块，里面一个组件的if判断就500多行，还得自己去慢慢摸索了。大家记得点一下赞！

H5中调用相册和相机方法

一、前言

二、问题

三、结尾