android上传图片在facebook messenger SDK webview中不起作用答案

【问题标题】：android upload image not working in facebook messenger SDK webviewandroid上传图片在facebook messenger SDK webview中不起作用
【发布时间】：2023-03-03 22:11:01
【问题描述】：

我正在开发一个向用户发送模板消息的 facebook 聊天机器人。该模板使用 facebook messenger SDK 并打开我的 react app 网站的 webview，该网站中有<input type="file" />。

当我单击Choose File 按钮然后选择图像文件时，输入未显示所选文件并且未调用onChange 事件。

<input
  onChange={handleOnChange}
  type="file"
  accept="image/png, .jpeg, .jpg, image/gif"
  capture={false}
/>

这个问题只发生在部分安卓手机上。 :(

【问题讨论】：

标签： android reactjs facebook webview upload

【解决方案1】：

对我来说同样的问题，不敢相信它只发生在某些 Android 浏览器上。就我而言，它是 VueJS。

      input(
        ref="file",
        type="file",
        accept="image/*",
        @change="select($event)"
      )

【讨论】：

【解决方案2】：

我从 Messenger 应用打开我的网站时遇到了同样的问题。发生的事情是事件随着组件的渲染而丢失。为了解决这个问题，我使用 e.persist() 来保存事件数据。我的回调也是异步：

const handleOnChange = async e => {
  e.persist();
  /*Rest of the logic */
};

<input
  onChange={handleOnChange}
  type="file"
  accept="image/png, .jpeg, .jpg, image/gif"
  capture={false}
/>

【讨论】：