从客户端向服务器端发送图像的文件数据

Question

我正在尝试将图像上传到存储（appwrite）。正如您在下面看到的那样，我有来自客户端的文件，但没有将其发送到服务器端。我已阅读 Appwrite 的文档，上传所需的文件数据可在客户端获得，但要将其上传到存储，我需要文件数据服务器端，我得到一个空对象。你能帮我解决这个问题吗？

提前非常感谢！

AuthForm.tsx 组件：

const handleFileChange = async (e: any) => {
    if(e.target.files) { 
      await createFileId(parseStringify(e.target.files[0]))
      //It's here
      console.log(e.target.files[0])
    }
}

用户.actions.tsx：

export const createFileId = async (img: any) => {
  const {storage} = await createAdminClient();
  //Not here
  console.log(img)
  
  const promise = storage.createFile(
    BUCKET_ID!,
    ID.unique(),
    img
  );

  promise.then(function (response) {
      console.log(response); // Success
  }, function (error) {
      console.log(error); // Failure
  });
}

Answer 1

在浏览器环境上传文件时，需要将文件包装在FormData中。这可确保文件作为请求的一部分正确发送到服务器。

AuthForm.tsx

const handleFileChange = async (e: any) => {
  if (e.target.files) {
    const file = e.target.files[0];

    // Prepare FormData to upload the file
    const formData = new FormData();
    formData.append("file", file);

    await createFileId(formData);

    // The file is here
    console.log(file);
  }
}

用户.actions.tsx

export const createFileId = async (formData: FormData) => {
  const { storage } = await createAdminClient();

  // Ensure the file data is available in formData
  console.log(formData.get("file"));

  const promise = storage.createFile(
    BUCKET_ID!,
    ID.unique(),
    formData.get("file") as File
  );

  promise.then(function (response) {
    console.log(response); // Success
  }, function (error) {
    console.log(error); // Failure
  });
}