上传文件至Supabase时触发path.replace is not a function错误求助

问题代码 #

async function uploadCv(e) {
    let file = e.target.files[0];

    const { data, error } = await supabase.storage.from("uploads").upload(file);
}

return (
    <input type="file" onChange={(e) => uploadCv(e)} />
)

报错信息 #

path.replace is not a function
TypeError: path.replace is not a function
at StorageFileApi._removeEmptyFolders (http://localhost:3000/static/js/bundle.js:25189:17)
at StorageFileApi. (http://localhost:3000/static/js/bundle.js:24713:32)
at Generator.next ()
at http://localhost:3000/static/js/bundle.js:24660:67
at new Promise ()
at __awaiter (http://localhost:3000/static/js/bundle.js:24642:10)
at StorageFileApi.uploadOrUpdate (http://localhost:3000/static/js/bundle.js:24694:12)
at StorageFileApi. (http://localhost:3000/static/js/bundle.js:24755:19)
at Generator.next ()
at http://localhost:3000/static/js/bundle.js:24660:67

错误原因 #

Supabase Storage的upload方法第一个参数要求传入字符串类型的存储路径（即文件在桶内的存储位置），但你直接把File对象传了进去。内部代码尝试对路径调用replace方法时，因File不是字符串、没有该方法，所以抛出报错。

修复方法 #

修正upload方法的参数顺序：第一个参数传字符串类型的存储路径，第二个参数传File对象。

示例代码1：直接用文件名作为存储路径 #

文件将直接保存在uploads桶的根目录下：

async function uploadCv(e) {
    let file = e.target.files[0];
    if (!file) return; // 增加判断，避免未选文件时执行上传逻辑

    // 第一个参数为存储路径（文件名），第二个为File对象
    const { data, error } = await supabase.storage.from("uploads").upload(file.name, file);

    // 处理上传结果
    if (error) {
        console.error("上传失败:", error);
    } else {
        console.log("上传成功，文件信息:", data);
    }
}

return (
    <input type="file" onChange={(e) => uploadCv(e)} />
)

示例代码2：自定义分层存储路径 #

如果需要按日期或分类组织文件，可以自定义路径：

async function uploadCv(e) {
    let file = e.target.files[0];
    if (!file) return;

    // 按日期创建文件夹，比如 2024-05-20/resume.pdf
    const dateFolder = new Date().toISOString().split('T')[0];
    const filePath = `${dateFolder}/${file.name}`;

    const { data, error } = await supabase.storage.from("uploads").upload(filePath, file);

    if (error) {
        console.error("上传失败:", error);
    } else {
        console.log("上传成功，文件路径:", data.path);
    }
}

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