H5 唤起摄像头拍照

h5 使用 input 上传图片:

<input class="full file-input" type="file" @change="(e) => sendFileMsg(e, 'image')" />

一开始是有写 accept 属性,限定图片文件类型的,但是在华为手机上会导致无法选择图片。所以只能去掉 accept,文件类型通过 js 限制。

在部分手机上,这种写法会让用户选择是相册还是拍照。但是,在部分手机只有相册。

于是,我只能添加上 capture 属性:

<input class="full file-input" type="file" accept="image/*" capture="camera" @change="(e) => sendFileMsg(e, 'image')" />

只有添加上 accept=“image/*”,部分手机才能唤起相机,否则还是相册。但这样还是有问题,因为这种写法会导致部分手机只有相机,没有相册。

没办法,我又去掉了 capture 属性:

<input class="full file-input" type="file" accept="image/*" @change="(e) => sendFileMsg(e, 'image')" />

这种写法(重点是 accept=”image/*“)在部分手机上会有相机和相册的选择。

以上的“部分手机”包括但不限于 realme。