Telegram内置浏览器中input type=file失效，如何实现文件上传？

Telegram内置浏览器（尤其是移动端）对标准<input type="file">元素的支持存在限制，导致无法正常唤起文件选择器。以下是两种可行的解决方法：

方法一：使用Telegram Web Apps（TWA）官方API #

这是官方推荐的方案，通过Telegram提供的Web Apps API直接调用系统文件选择器，兼容性更好。

步骤1：引入Telegram Web Apps脚本 #

在页面头部添加官方脚本，初始化TWA环境：

<script src="https://telegram.org/js/telegram-web-app.js"></script>

步骤2：调用文件选择API #

通过openFilePicker方法唤起文件选择器，并处理选中的文件：

// 验证是否处于Telegram Web Apps环境
if (window.Telegram?.WebApp) {
  const tg = window.Telegram.WebApp;

  // 请求文件写入权限
  tg.requestWriteAccess().then(granted => {
    if (!granted) {
      alert("需要授予文件访问权限才能完成上传");
      return;
    }

    // 打开文件选择器，指定允许的图片类型
    tg.openFilePicker({
      allowMultiple: false,
      accept: ["image/jpeg", "image/png"]
    }).then(files => {
      if (files.length === 0) return;

      const selectedFile = files[0];
      // 将文件转换为Blob对象，用于上传
      selectedFile.getBlob().then(blob => {
        // 构建FormData，准备上传到服务器
        const formData = new FormData();
        formData.append("image", blob, selectedFile.name);

        // 示例：通过fetch发送上传请求
        fetch("/your-upload-api-endpoint", {
          method: "POST",
          body: formData
        }).then(response => {
          if (response.ok) {
            alert("文件上传成功");
          } else {
            alert("上传失败，请重试");
          }
        }).catch(err => {
          console.error("上传出错:", err);
        });
      });
    }).catch(err => {
      console.error("文件选择失败:", err);
    });
  });
}

方法二：引导用户切换到外部浏览器 #

如果不想依赖TWA API，可以引导用户在系统默认浏览器中打开网页，标准<input type="file">在外部浏览器中可以正常工作：

实现代码 #

<!-- 提示用户切换浏览器的容器 -->
<div id="telegram-prompt" style="padding: 1rem; background: #f5f5f5; border-radius: 8px; display: none;">
  <p>当前在Telegram内置浏览器中无法上传文件，请点击右上角菜单，选择「在浏览器中打开」后重试。</p>
</div>

<script>
// 检测是否处于Telegram内置浏览器
function isTelegramWebView() {
  return /Telegram/i.test(navigator.userAgent);
}

// 显示提示并隐藏原文件输入框
if (isTelegramWebView()) {
  document.getElementById("telegram-prompt").style.display = "block";
  document.querySelector('input[type="file"]').style.display = "none";
}
</script>

注意事项 #

• TWA方案需要确保网页是通过Telegram Bot的菜单或Bot发送的链接打开，才能正常初始化Web Apps环境。
• 不同版本的Telegram客户端对API的支持可能存在差异，建议在主流版本中测试兼容性。

内容的提问来源于stack exchange，提问作者Vladimir Böhm