与"fetch“中的方法POST make GET调用共享目标API
与"fetch“中的方法POST make GET调用共享目标API
提问于 2020-06-18 17:03:51
我尝试使用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
Stack Overflow用户
发布于 2020-06-18 20:24:25
我认为这个问题是我在没有https的情况下在本地测试。在我上传到https和web域名后，一切都好了。我有一个POST请求。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62446290
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号