时间戳

首页 > 解决方案 > 如何使用 Web Share Target API 共享文件？

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

问题描述

如何使用 Web 共享目标 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 周！

标签： javascriptprogressive-web-appsservice-workerweb-share

解决方案

如果您想将文件直接发送到您的 Web 服务器，您可以跳过服务人员的参与。

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

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

推荐阅读