先说说我做这个的场景，我们是开发的h5应用，客户是用的rn写的原生app，h5应用是内嵌在app里面的。
具体需求就是，在点击上传附件的时候，会从底部有个弹出层，分别显示相册、相机、拍摄三个图标以供用户选择上传什么类型的文件。
结论就是 ：h5实现有兼容问题，在部分安卓手机可以直接访问到手机相册，在ios是需要在弹出一个选择框让用户进行选择，这样的操作是客户不能接受的。最后拍摄视频和拍照h5来实现，相册是调用原生的方法来实现的。
ps：我和原生联调的时候还尝试过，当用户选择相册以后原生可以拿到file，然后通过转换成base64传递给h5,不过加密和解码也有一定兼容性，而且视频太大的话base64字符串太长会有问题。

一、input的两个参数

二、代码示例

1.html部分

<input
  style="display: none;"
   ref="uploadInput"
   type="file"
   :accept="acceptMap[chooseType]"
   @change="fileChange"
绑定的accept根据选中的类型来实时更改
 
acceptMap:{
   1:'',
   2:'image/*',
   3:'video/*'
 chooseType = 1 | 2 | 3 
2.js部分
 
当点击icon以后
 
const uploadInput = this.$refs.uploadInput
// 这里要根据不同系统来判断添加或删除capture
uploadInput.setAttribute('capture','filesystem')
// 或者
uploadInput.setAttribute('capture','environment')
// 或者
uploadInput.removeAttribute('capture')
// 如果是其他定制需求需要新加判断
this.$refs.uploadInput.click()
在使用input在h5进行文件上传，因为涉及使用的浏览器内核不一样导致安卓和ios选择相册和拍摄会有兼容问题，在部分手机浏览器中我们只需要修改accept和capture就可以实现区分拍摄和相册等操作。但是在有的浏览器中即便是加了capture也会出现拍摄和相册让你选择的情况，像这种的话h5目前还没有更好的办法如果有同学遇到可以一起探讨交流。
                    先说说我做这个的场景，我们是开发的h5应用，客户是用的rn写的原生app，h5应用是内嵌在app里面的。具体需求就是，在点击上传附件的时候，会从底部有个弹出层，分别显示相册、相机、拍摄三个图标以供用户选择上传什么类型的文件。结论就是：h5实现有兼容问题，在部分安卓手机可以直接访问到手机相册，在ios是需要在弹出一个选择框让用户进行选择，这样的操作是客户不能接受的。最后拍摄视频和拍照h5来实现，相册是调用原生的方法来实现的。
用H5做一个移动端的网页时，需要上传图片，于是需要调用手机相册和相机功能。
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
三个属性：
accept - 规定可提交的文件类型。
capture - 系统所捕获的默认设备。camera(照相机)，camcorder(摄像机...
				
HTML5调用手机摄像机、相册功能 方法
最近用MUI框架做webapp项目，在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能！
在查资料的时候，想起了另一种用input调用摄像和相册功能的方法，之前没有深入了解过，现在整理一下：
不需要特殊环境，使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码：
accep...
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.
通过复写 WebChromeClient.onShowFileChooserWebChromeClient.openFileChooser来实现 打开系统图片资源
辅助WebView处理图片上传操作【<input type=file> 文件上传标签】
4. 权限自动获取
activity 添加
@RuntimePermissions
主动获取权限
MainActivityPermissionsDispatcher.method_xWithPe
				
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
				
前些日子项目中遇到了一个问题（移动端项目），就是在反馈页面点击上传图片的时候，实现在本地读取照片并预览的效果，这样的实现效果可以避开把图片上传到服务器在预览的尴尬，具体的页面展示效果如下：
具体的代码如下（偷个懒，也为了大家看的更方便，就截图了...）
在这里面按钮的呈现样式是通过字体实现的，用的是阿里图标库，然后在图标的上面就是图中的input按钮了，只是input给它全透明了，所以...
				
最近在做一个微信端h5的项目，要求同时调起手机相册和相机，写下近期踩过的坑。
一开始的想法肯定是直接用原生input标签
<input type="file" class="input">
复制代码直接这样写就可以调起相册，因为并没有对它限定文件类型，所以此时的状态是既可以选择图片也可以选择文档。
产品要求对图片的格式进行限定，只支持jpg和png格式的图片
<input typ...
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.ClipData;
import android.conte...
同时，你也可以在WebView中设置WebChromeClient的回调函数，通过`onShowFileChooser`方法来控制文件选择器的行为。在该方法中，你可以根据自己的需要返回一个空的Intent，这样就可以阻止选择器调用摄像头了。以下是示例代码：
```java
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        // 返回空的Intent，阻止选择器调用摄像头
        filePathCallback.onReceiveValue(null);
        return true;
需要注意的是，这种方法只能阻止文件选择器调用摄像头，如果页面中有其他组件（如JavaScript代码）调用了摄像头，仍然需要进行其他处理。
				Vue3 Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in
                    CSDN_GongJun: 
                    我测试的结果是 有 capture 属性 无论为何值包括空，空字符串，“*”等 ，只要有 capture 属性 都是直接打开摄像头（默认后置摄像头，但可以相机切换），只有不写capture 属性才弹框选择手机相册/拍照  测试环境uc浏览器及企微私有版
<input type="file" accept="video/*" /> // 选择相册和拍照
<input type="file" accept="video/*" capture/> // 直接相机拍
                uniapp中使用mescroll实现下拉刷新以及上拉加载
                    CSDN-Ada助手: 
                    恭喜作者在uniapp中成功实现了下拉刷新以及上拉加载功能，这对提升用户体验和页面流畅度都是非常有帮助的。希望作者能够继续保持创作的热情和积极性，不断探索更多有趣的技术和功能，为读者带来更多的启发和帮助。建议作者在下一篇博客中可以分享一些关于uniapp中其他常用插件或组件的使用经验，或者深入探讨一些技术细节，让读者受益更多。期待作者的下一篇作品！
                uniapp实现外卖的订单地图
                    CSDN-Ada助手: 
                    恭喜你能够不断地分享有关uniapp实现外卖订单地图的经验和技巧，这对于很多人来说都是非常有帮助的。接下来，我建议你可以考虑分享一些关于uniapp的实际案例，例如如何应对订单量剧增时的处理方式，或者是如何优化用户体验等方面的内容。希望你能够继续保持创作的热情，期待你更多的精彩内容！
                uniapp在小程序中使用createIntersectionObserver的问题
                    CSDN-Ada助手: 
                    推荐 小程序 技能树：https://edu.csdn.net/skill/mini_programs?utm_source=AI_act_mini_programs
                uniapp在小程序中使用createIntersectionObserver的问题
                    知识的海洋狗刨: 
                    横向滚动的监听，实际是relativeTo这个方法，传入容器类，在监听目标元素，代码就没有贴出来了，如果需要可私聊我