如何通过HTML input实现移动端直接调用摄像头拍摄多张照片并上传

原生<input type="file">的默认行为由浏览器遵循W3C规范实现，本身不支持同时开启multiple多选和连续拍摄多张照片的能力：

• 仅设置multiple属性时，浏览器默认拉起系统文件选择器，只能从已有文件/相册中选多张，无法直接在相机界面连续拍摄
• 额外增加capture="environment"（调用后置摄像头）属性时，浏览器会直接拉起系统相机，但仅支持单次拍摄，拍摄完成后自动返回上传页，无法连续多拍

你遇到的多端表现不一致是各浏览器、各移动端OS对原生文件选择器的自定义实现差异导致，和表单代码本身无关。

方案1：轻量妥协方案（无需复杂JS） #

不对原生表单做大幅修改，仅在页面添加上传引导提示，告知用户点击上传按钮后可选择系统相机入口，部分厂商定制ROM、高版本iOS的系统相机支持拍摄多张后直接批量选中返回，无需跳转相册选择。但该方案兼容性不可控，无法覆盖你测试的所有终端环境。

方案2：自主实现内嵌相机（全端兼容） #

通过浏览器原生MediaDevices API自行实现网页内相机拍摄能力，完全自主控制拍摄逻辑，可完美支持连续多拍后批量上传，你测试的所有浏览器版本均支持该API，实现步骤如下：

1. 页面新增视频预览容器、拍摄控制按钮，替代原生上传入口
2. 调用摄像头权限并渲染预览流：

// 请求后置摄像头权限
const stream = await navigator.mediaDevices.getUserMedia({
  video: { facingMode: 'environment' }
})
// 渲染到video标签
const videoEl = document.querySelector('video')
videoEl.srcObject = stream
await videoEl.play()

3. 实现拍摄逻辑，每次拍摄生成独立File对象存入临时数组：

const shotFiles = []
const canvasEl = document.querySelector('canvas')
// 点击拍摄按钮执行
document.querySelector('#shootBtn').addEventListener('click', () => {
  // 截取当前视频帧
  canvasEl.width = videoEl.videoWidth
  canvasEl.height = videoEl.videoHeight
  canvasEl.getContext('2d').drawImage(videoEl, 0, 0)
  // 转成JPG格式的File对象
  canvasEl.toBlob((blob) => {
    const file = new File([blob], `shot_${Date.now()}.jpg`, { type: 'image/jpeg' })
    shotFiles.push(file)
    // 可自行添加已拍摄预览缩略图逻辑
  }, 'image/jpeg', 0.9)
})

4. 用户确认所有拍摄内容后，将shotFiles内的文件批量append到FormData中提交即可，后端逻辑无需做任何适配修改。

注意事项 #

• 调用摄像头权限必须在HTTPS协议环境下执行，本地localhost调试不受限制
• iOS Safari下需要给<video>标签添加playsinline属性，避免视频流强制全屏播放
• 不需要拍摄时要主动调用stream.getTracks().forEach(track => track.stop())关闭摄像头，避免占用硬件资源

内容的提问来源于stack exchange，提问作者M1NT