react-native 上传文件到 Supabase

Supabase 是一个全栈解决方案，它包括了数据库、身份验证、实时更新、存储等服务，适合那些希望减少开发时间和复杂性的应用。

最近在找一个能免费存储的服务商，自己搭的应用，不想写后端，也不想乱七八糟的各种环境的部署。选来选去选择了Supabase。

https://github.com/supabase/supabase

74.9K⭐️，懂得都懂 …

# Install dependencies
npm i @supabase/supabase-js
npm i base64-arraybuffer @react-native-async-storage/async-storage

# Install Expo packages
npx expo install expo-image-picker
npx expo install expo-file-system

env

EXPO_PUBLIC_SUPABASE_URL=https://******.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=******.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inhib3RtbHlyanNweHhreW55b3JlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzExNTgxOTAsImV4cCI6MjA0NjczNDE5MH0.******

确保process.env.EXPO_PUBLIC_SUPABASE_URL和process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY能访问到。

选择图片

const [image, setImage] = (useState < string) | (null > null);

// 选择图片
const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 1,
    // base64: true
  });

  if (!result.canceled) {
    setImage(result.assets[0].uri);
  }
};

上传图片

试过了直接上传blob是不行的，具体为啥，我也不知道 …

const response = await fetch(image);
const blob = await response.blob();
// 生成唯一文件名
const fileName = `${Date.now()}-${image.split("/").pop()}`;
// 上传到 Supabase Storage
console.log("Current file: ", {
  type: blob.type,
  size: blob.size,
  name: fileName,
});

必须要先编码base64，然后上传的时候解码base64 …

const base64 = await FileSystem.readAsStringAsync(image, {
  encoding: "base64",
});
const { data, error } = await supabase.storage
  .from("testReactNative") // 替换为你的 Supabase 存储桶名称
  .upload(fileName, decode(base64), {
    contentType: blob.type,
  });