input的type=file在移动手机端H5页面实现调用本地相册、拍照、录音

语法

<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />

三个属性：

几种写法：

<!-- ios 和 安卓都可以调用摄像头 -->
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />

 <!-- 在安卓无法调用摄像头 -->
<input type="file" name="upload" accept="image/png,image/jpeg,image/gif" capture="camera">

<!-- 在安卓微信会出现 "No apps can perform this action" 在uc浏览器正常。 ios能正常使用。pc端可以使用 -->
<input type="file" accept=".gif,.jpg,.png,.jpeg,.bmp" name="file" />

<!-- 调用相机 -->
<input type="file" accept="image/*" capture="camera">  

<!-- 调用摄像机 -->
<input type="file" accept="video/*" capture="camcorder">

 <!-- 调用录音机 -->
<input type="file" accept="audio/*" capture="microphone">

<!-- 不加上capture，则只会显示相应的，例如下三种依次是：拍照或图库，录像或图库，录像或拍照或图库， -->
<input type="file" accept="image/*" >
<input type="file" accept="video/*" >
<input type="file" accept="audio/*" >

上传身份证正反面实例

<!--正面-->
   <div class="center">
         <input type="file" class="input-file" name="picture" ref="pictureFront" id="pictureFront"
               @change="changeImage($event,'front')"
               style="position: absolute;z-index: -1;left:-100%;opacity: 0"
               accept="image/*"/>
          <div @click="focus('pictureFront')" class="image">
                 <img v-if="picData.front" :src="picData.front" alt="">
                 <i v-else class="iconfont icon-shenfenzhengzhengmian"></i>
                 <div v-if="!picData.front">点击上传</div>
           </div>
     </div>

changeImage (e, type) {
    const file = e.target.files[0];
     if (file) {
        this.fileData[type] = file;
        const reader = new FileReader();
        const that = this;
        reader.readAsDataURL(file);
        reader.onload = function (e) {
        // 这里的this 指向reader
        that.picData[type] = this.result;
        };
    }
},
focus (type) {
     this.$refs[type].click();
     // document.getElementById(type).click(); // 和上述同样效果
 },

相关资料