使用input-file实现手机原生拍照、调起相册功能

调起手机默认摄像头

先看一个例子：https://www.wufoo.com/html5/accept-attribute/

如果我们要调起手机的摄像头拍照，点一下直接打开：

<input type="file"
          accept="image/*"
          capture="camera"
          id="avatar-camera"
           @change="uploadAvatar($event)"
>

这样就是点击后会唤起原生摄像头，进行拍照，同样的，还可以调用手机的麦克风录音。

<p>Capture Audio: <input type="file" accept="audio/*" id="capture" capture="microphone">

如果要录像，也是可以的：

<p>Capture Video: <input type="file" accept="video/*" id="capture" capture="camcorder">

此功能在安卓和ios上表现均一致，会调起原生摄像头。

调用手机相册

我之前有个想法，就是input能否单独使用相册上传，而不是使用出现选择的菜单，从相册、文件、摄像头中选择一个？答案是否定的，input file是不能禁止相机！

所以，对应使用相册上传（推荐这种写法，下面那种红米有时会不识别）：

<input type="file"
         accept="image/*"
>

或者

 <input type="file"
           accept="image/png,image/jpeg,image/gif"
>

然后使用JS加一些条件筛选和判断。

相关资料