cloudflare - Cloudflare、R2，如何上传图片？-6ren

cloudflare - Cloudflare、R2，如何上传图片？

转载作者：行者123 更新时间：2023-12-03 08:01:28

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>