Cloud Flare、R2，如何上传图片？
我是 Cloud Flare 世界的新手，
我可以通过拖动上传图片，但是
如何使用编码上传图片？来自应用程序？？
我必须使用“WORKERS”<--东西吗？
最佳答案
嘿，我被这个问题困扰了两天，但无法弄清楚。所以我想分享我的解决方案。
我的目标
我正在开发一种软件，用于收集最终用户的数据以从他们那里获取信息。但他们需要提交一张图像供我们验证，这就是为什么我需要一个表单来让用户上传他们的文件，并需要一个 API 端点来存储他们的文件。
解决方案
我将 Cloudflare Worker 设置为 API，因为它与 R2 连接良好，您只需在 Worker 设置中定义它即可。
我的 Cloudflare 工作脚本和允许用户上传文件的示例表单
// CLOUDFLARE WORKER SCRIPT
// ------------------------
export default {
async fetch(request, env) {
const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS',
'Access-Control-Max-Age': '86400',
};
// Check for preflight request from the browser.
if (request.method === 'OPTIONS') {
return new Response(null, {
headers: {
...corsHeaders,
'Access-Control-Allow-Headers': request.headers.get(
'Access-Control-Request-Headers'
),
}
});
} else {
// Handle actual request and store image to bucket.
const { headers } = request;
// Key is date now since we want keys to be unique.
const key = Date.now();
await env.MY_BUCKET.put(key, request.body, {
httpMetadata: {
contentType: headers.get('content-type')
}
});
return new Response('success!', {
headers: {
...corsHeaders,
'Access-Control-Allow-Headers': request.headers.get(
'Access-Control-Request-Headers'
),
}
});
}
}
}<!DOCTYPE html>
<html>
<head>
<title>Upload Images with Cloudflare R2</title>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
<label for="image">Select image to upload:</label>
<input type="file" name="image" id="image" /><br /><br />
<input type="submit" value="Upload" />
</form>
<script>
async function uploadImage(file) {
fetch('https://<YOUR-OWN-WORKER>.workers.dev', {
method: 'POST',
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': file.type
},
body: file
})
.then((response) => response.text())
.then((data) => console.log(data))
.catch((error) => console.error(error));
}
const image = document.getElementById('image');
const onSelectFile = () => uploadImage(image.files[0]);
image.addEventListener('change', onSelectFile, false);
</script>
</body>
</html>关于cloudflare - Cloudflare、R2，如何上传图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73943907/