如何使用FilePond上传到Cloudflare图像的直接创建者上传URL？

Question

上传到云彩图片与FilePond失败返回一个400。我正在用一个简单的表格并排测试它。我从我们的api中获得了Direct上传URL，并将其传递给两个组件。表单总是成功的，而FilePond总是失败。有人能给我一个建议吗？https://developers.cloudflare.com/images/cloudflare-images/upload-images/direct-creator-upload/

它正在返回一个400坏的请求。来自CloudFlare或FilePond的人能理解为什么CF映像响应来自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上传url。如果您正在使用TS，请注意，到目前为止，存在类型不匹配，这会导致错误。只需从要修复的函数参数中删除transfer options即可。

这里有更多详细信息：https://github.com/pqina/filepond/issues/818