Поделиться Целевым API с методом POST сделать вызов GET в "выборке" - PullRequest
Новая
       45

Поделиться Целевым API с методом POST сделать вызов GET в "выборке"

0 голосов
/ 18 июня 2020

Я пробую https://web.dev/web-share-target/ и https://www.youtube.com/watch?v=lNOP5dcLZF4 (пример в https://share-target-demo.glitch.me/file/). Но в моем случае event.request.method всегда GET. Я должен быть POST. В чем проблема? Могу я поделиться файлом. Вот рабочий пример https://github.com/GoogleChrome/samples/tree/gh-pages/web-share, но это многовато. Кто-нибудь может сказать мне, могу ли я сделать POST-запрос для обмена файлом? Или, может быть, я должен использовать workbox.routing.registerRoute? Была ли у меня другая альтернатива?

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="manifest" href="manifest.json">
  <meta name="viewport" content="width=device-width">
  <style>
    html {
      font-family: sans-serif;
      font-size: 2em;
    }
    img {
      display: block;
      max-width: 100%;
    }
  </style>
</head>
<body>
  <p>You can share files to this app.</p>
  <p>Or view the data for a selected file:</p>
  <input type="file" accept="foo/bar">
  <script>
    navigator.serviceWorker.register('sw.js');

    function displayImage(file) {
      const img = new Image();
      const url = URL.createObjectURL(file);
      img.onload = () => {
        URL.revokeObjectURL(url);
      };
      img.src = url;
      document.body.append(img);
    }

    function displayFile(file) {
      const ul = document.createElement('ul');
      document.body.append(ul);

      for (const prop of ['name', 'size', 'type']) {
        const li = document.createElement('li');
        li.textContent = `${prop} = ${file[prop]}`;
        ul.append(li);
      }

      displayImage(file);
    }

    navigator.serviceWorker.onmessage = (event) => {
      const file = event.data.file;
      displayFile(file);
    };

    document.querySelector('input[type=file]').onchange = (event) => {
      displayFile(event.target.files[0]);
    };
  </script>
</body>
</html>

sw.js

addEventListener('install', () => {
  skipWaiting();
  console.log('install');
});

addEventListener('activate', () => {
  clients.claim();
  console.log('activate');
});

addEventListener('fetch', (event) => {
    console.log(event.request.method);
  if (event.request.method !== 'POST') return;

  event.respondWith(Response.redirect('./'));

  event.waitUntil(async function () {
    const data = await event.request.formData();
    const client = await self.clients.get(event.resultingClientId);
    const file = data.get('file');
    client.postMessage({ file });
  }());
});

manifest.json

{
  "name": "File Share Target",
  "short_name": "File ST",
  "start_url": "./",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#fff",
  "theme_color": "#111",
  "icons": [
    {
      "src": "https://img.icons8.com/nolan/512/league-of-legends-icon.png",
      "sizes": "512x512"
    }
  ],
  "share_target": {
    "action": "./",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "file",
          "accept": ["*/*"]
        }
      ]
    }
  }
}

1 Ответ

0 голосов
/ 18 июня 2020

Думаю, проблема заключалась в том, что я тестировал локально без https. После загрузки на https и в веб-домен все в порядке. У меня есть запрос POST.

...