Uppy Dashboard设置disableLocalFiles:true后，iOS端相机选项消失问题

可运行示例 #

可运行示例位于Codepen平台

复现步骤 #

设置disableLocalFiles: true的基础示例代码如下：

<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://releases.transloadit.com/uppy/v3.8.0/uppy.min.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>需要启用JavaScript才能运行此示例</noscript>
    <button id="uppyModalOpener">打开模态框</button>

    <script type="module">
      import {
        Uppy,
        Dashboard,
        Webcam,
      } from "https://releases.transloadit.com/uppy/v3.8.0/uppy.min.mjs";

      const uppy = new Uppy({ debug: true, autoProceed: false })
        .use(Dashboard, { trigger: "#uppyModalOpener", disableLocalFiles: true })
        .use(Webcam, { target: Dashboard })
    </script>
  </body>
</html>

预期行为 #

• 禁用拖拽文件到模态框上传的功能
• 移除“我的设备”按钮
• 仅保留相机选项

实际行为 #

在Mac版Chrome中符合预期：

但在iOS Safari中仅显示空的模态框：

问题 #

为何iOS Safari或Android Chrome中不显示相机选项？

问题分析与解决建议 #

1. 移动端媒体设备权限限制 #

iOS Safari和Android Chrome对摄像头访问有严格规则：

• 必须在HTTPS环境下才能请求摄像头权限（本地localhost除外），HTTP协议会直接禁止权限请求，导致Webcam插件无法加载。
• 权限请求必须由用户主动交互触发（比如点击按钮），确保页面触发逻辑是通过用户点击启动模态框（当前示例符合要求，但需确认实际部署环境）。

2. 优化Webcam插件配置 #

给Webcam插件添加明确的移动端适配配置，强制启用相机功能：

.use(Webcam, {
  target: Dashboard,
  modes: ['picture'], // 明确指定拍照模式
  facingMode: 'environment' // 指定使用后置摄像头，可选'user'（前置）
})

3. 调整disableLocalFiles配置的影响 #

disableLocalFiles: true在移动端可能会隐藏所有本地文件相关入口（包括相机触发入口），可以尝试：

• 不使用disableLocalFiles，改用Dashboard的自定义配置隐藏本地文件上传按钮，保留相机入口。
• 升级Uppy到最新稳定版本，修复旧版本中disableLocalFiles与Webcam插件的兼容性问题。

4. 浏览器与版本兼容性检查 #

确认使用的iOS Safari、Android Chrome为最新版本，同时升级Uppy到最新版，新版本通常会修复移动端已知的兼容性bug。

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