简介
用H5做一个移动端的网页时,需要上传图片,于是需要调用手机相册和相机功能。
具体实现
1.HTML
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
2.三个属性:
(1)accept - 规定可提交的文件类型。
(2)capture - 系统所捕获的默认设备。camera(照相机),camcorder(摄像机),microphone(录音)
(3)mutiple - 支持多选。当支持多选时,multiple优先级高于capture。
3.几种写法:
// 1.ios 和 安卓都可以调用摄像头
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
// 2.在安卓无法调用摄像头
<input type="file" name="upload" accept="image/png,image/jpeg,image/gif" capture="camera" />
//3.在安卓微信会出现,"No apps can perform this action",在uc浏览器正常。 ios能正常使用。pc端可以使用
<input type="file" accept=".gif,.jpg,.png,.jpeg,.bmp" name="file" />
// 4.调用相机
<input type="file" accept="image/*" capture="camera" />
// 5.调用摄像机
<input type="file" accept="video/*" capture="camcorder" />
// 6.调用录音机
<input type="file" accept="audio/*" capture="microphone">
<div v-show="false">{{isShowFun}}</div>
// 7.不加上capture,则只会显示相应的,例如下三种依次是:拍照或图库,录像或图库,录像或拍照或图库
<input type="file" accept="image/*" >
<input type="file" accept="video/*" >
<input type="file" accept="audio/*" >
注意
暂时还没有找到简便的只调用相册的方法,不过有一篇可以借鉴的文章,需要自己修改调用方法的。
链接: https://blog.csdn.net/weixin_45365889/article/details/96872527