客户端图片文件无法传递至Appwrite服务端，求上传解决方案

AI 小北

2026-6-17

问题解决：Appwrite存储上传时文件数据变为空对象

问题根源：你用parseStringify处理了File对象，而File属于Blob类型，无法通过JSON序列化保留数据——JSON.stringify只能处理对象的可枚举属性，File的核心数据（二进制内容、真实文件信息）都是不可枚举的，序列化后就变成了空对象。

解决方案分两种场景：

场景1：`createFileId`在客户端执行（直接调用Appwrite客户端SDK）

直接传递原始File对象，去掉parseStringify：
修改AuthForm.tsx的代码：

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

场景2：`createFileId`是服务端函数（比如Next.js Server Action）

客户端需要用FormData传递文件，服务端从FormData中提取：

修改AuthForm.tsx：

const handleFileChange = async (e: any) => {
    if(e.target.files) { 
      const formData = new FormData();
      formData.append('image', e.target.files[0]);
      await createFileId(formData);
      console.log(e.target.files[0])
    }
}

修改user.actions.tsx：

export const createFileId = async (formData: FormData) => {
  const {storage} = await createAdminClient();
  const img = formData.get('image') as File; // 从FormData中获取文件
  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
  });
}