vue移动端获取本地相机和相册

//页面
 <div class="uploadFile">
          <!-- ul、li标签用于展示从本地添加的预览图片 -->
          <ul v-show="uploadImg.length != 0">
            <li v-for="(item, index) in uploadImg" :key="index" class="addPic">
              <img :src="item" style="width: 100px; height: 100px" />
            </li>
          </ul>
          <input
            type="file"
            id="file"
            accept="image/*"
            @change="getPicture($event)"
          />
          <button @click="callFile" v-show="showInputImg">+</button>
        </div>

//js
methods:{
 getPicture(e) {
      //预览图片
      let src = window.URL.createObjectURL(e.target.files[0]);
      this.uploadImg.push(src);
      //将图片文件转化成base64格式图片
      var reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);

      reader.onload = (e) => {
        let bes = reader.result.split(",")[1];
        console.log(bes);
        this.base64.push(bes);
      };

      // console.log(reader.readAsDataURL(e.target.files[0]));
    },
    callFile() {
      //点击添加图片按钮，触发type:"file"的input标签
      let fileDom = document.querySelector("#file");
      fileDom.click();
    },
}
//css
.uploadFile {
  display: flex;
  height: 120px;
  line-height: 120px;
  padding: 15px 0 0px 30px;

  overflow: hidden;
  input{
    display: none;//隐藏样式 默认的样式
  }
}
.uploadFile ul {
  margin: 0;
  display: flex;
}
.uploadFile ul li {
  margin-right: 10px;
}
.uploadFile .addPic img {
  height: 100px;
  width: 100px;
}
.uploadFile button {
  height: 100px;
  width: 100px;
  font-size: 50px;
  border: none;
  color: rgb(182, 182, 182);
  background-color: rgb(243, 243, 243);
}