我们如何使用 FilePond 将图像 Direct Creator Upload URL 上传到 Cloudflare？

Question

使用 FilePond 上传到 Cloudflare Images 失败，返回 400。我正在使用一个简单的表单并排测试它。我从我们的 api 获取 Direct Creator Upload URL，将其传递给两个组件。表单总是成功，而 FilePond 总是失败。有人可以建议修复吗？ https://developers.cloudflare.com/images /cloudflare-images/upload-images/direct-creator-upload/

它返回 400 错误请求。来自 CloudFlare 或 FilePond 的人可以弄清楚为什么 CF Images 响应来自 FilePond 的请求格式错误吗？

import { useState } from "react";
import { FilePond, registerPlugin } from "react-filepond";

import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import DefaultButton from "./BaseComponents/defaultButton";

// Register the plugins
registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginFileValidateType,
);

interface Props {
  uploadURL: string;
}

export default function UploadAvatar(props: Props) {
  const { uploadURL } = props;
  const [files, setFiles] = useState<any>([]);
  return (
    <>
      {/* This simple form uploads successfully */}
      <form action={uploadURL} method="post" encType="multipart/form-data">
        <input type="file" id="myFile" name="file" />
        <DefaultButton type="submit">Upload Image</DefaultButton>
      </form>

      {/* FilePond upload fails with a 400 */}
      <div className="h-44 w-44 rounded-full ring-4 ring-light-control-accent-rest dark:ring-dark-control-accent-rest">
        <FilePond
          files={files}
          onupdatefiles={setFiles}
          allowMultiple={false}
          maxFiles={1}
          server={uploadURL}
          name="file"
          labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
          acceptedFileTypes={["image/*"]}
          onerror={(error) => console.log(error)}
        />
      </div>
    </>
  );
}

Answer 1

好的，解决方案是控制文件处理，以确保我们只发送文件。

使用此处概述的方法： https://pqina.nl/filepond/docs /api/server/#process-1 将 url-to-api 替换为我们从 Cloudflare API 获取的 Direct Creator Upload url。如果您使用 TS，请注意，截至今天，存在类型不匹配的问题，从而导致错误。只需从函数参数中删除传输选项即可修复。

更多详细信息请参见：https://github.com/pqina/filepond/issues/818