如何从Remix应用通过multipart/formData向Sanity.io上传图片？

你需要先通过unstable_parseMultipartFormData解析表单数据拿到文件对象，然后将这个File对象直接传给sanityClient.assets.upload的第二个参数——Sanity的该方法支持接收File、Blob或可读流作为上传源。

完整代码示例 #

import { unstable_parseMultipartFormData } from "@remix-run/node";
import { sanityClient } from "~/path-to-your-sanity-client";

export async function action({ request }: ActionArgs) {
  // 解析multipart格式的表单数据
  const formData = await unstable_parseMultipartFormData(request);
  
  // 从表单中提取文件及其他字段
  const profilePic = formData.get("profilePic") as File;
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;

  // 基础校验：确保文件存在且有效
  if (!profilePic || profilePic.size === 0) {
    throw new Error("请选择有效的图片文件");
  }

  // 上传图片到Sanity资产库
  const imageAsset = await sanityClient.assets.upload(
    "image",
    profilePic, // 直接传入解析得到的File对象
    {
      contentType: profilePic.type,
      filename: `${name}-profile-pic`,
    }
  );

  // 创建关联图片的Sanity文档
  const sanityDoc = {
    _type: "profilePic",
    image: {
      _type: "image",
      asset: {
        _type: "reference",
        _ref: imageAsset._id,
      },
    },
    name,
    email,
    isOrganisation: false,
  };

  await sanityClient.create(sanityDoc);

  // 返回成功响应（可根据需求调整）
  return { success: true, assetId: imageAsset._id };
}

核心说明 #

• unstable_parseMultipartFormData会将表单中的文件解析为标准File对象，无需额外转换即可被Sanity上传方法识别。
• 可选优化：可以添加文件类型校验（比如仅允许image/jpeg、image/png等），进一步避免无效上传。
• 若处理大文件，可通过profilePic.stream()获取可读流传入upload方法，实现流式上传。

内容的提问来源于stack exchange，提问作者Anam