如何使用 Web Share Target API 共享文件？

Question

如何使用 Web Share Target API 共享文件？

当我尝试从手机上的图库应用共享文件时，我设法让我的 Progressive Web App 出现。我的问题是如何获取文件并将其发送到服务器或使用共享文件填充带有 type="file" 的 HTML 输入？

这就是我现在拥有的

在 manifest.json 中

    "share_target": {
    "action": "/qtransfer-p/send.php",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "fileToUpload",
          "accept": [".pdf", ".png", ".jpeg", ".doc", ".docx", ".pdf", ".xls", ".xlsx", ".txt", ".mp4", ".mp3", ".wav", ".rar", ".zip"]
        }
      ]
    }
}

在 sw.js 中（服务工作者）

self.addEventListener('fetch', event => {
  const url = new URL(event.request.clone().url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/qtransfer-p/send.php') {
      event.respondWith(Response.redirect('/qtransfer-p/send.php'));
      event.waitUntil((async () => {
        console.log("1");
        const data = await event.request.clone().formData();
        console.log("2");
        console.log(data);
        const client = await self.clients.get(event.resultingClientId || event.clientId);
        console.log("3");
        const file = data.get("fileToUpload");
        console.log("file", file);
        client.postMessage({ file, action: 'load-file' });
      })());
      console.log("ok");
      return 0;
  }
});

现在，当我分享照片时，我会进入控制台：

1

好的

Uncaught (in promise) TypeError: Failed to fetch

所以我认为问题出在“const data = await event.request.clone().formData();”上。

请有人帮忙！我试图解决这个问题 2 周！

Answer 1

如果您想将文件直接发送到您的网络服务器，您可以跳过 service worker 的参与。

您当前的manifest.json 设置将导致POST 请求被发送到您来源的/qtransfer-p/send.php，编码为multipart/form-data，只要有人将支持的文件共享到您安装的PWA。

只要您不在服务人员中拦截该请求，我相信它会像任何其他 HTTP POST 一样直接发送，并且可以在服务器端进行处理。