Supabase 存储可恢复文件上传在 6MB 时持续停滞

Question

我在使用 FilePond 和 TUS 与 Supabase Storage 上传文件时遇到一个奇怪的问题。 6MB 以下的文件上传工作正常，但任何超过 6MB 的文件都会卡在一定的百分比上。通常约为文件的 6MB 块百分比。

以下是我尝试通过 Supabase CLI 仪表板上传较大文件（如 7MB 图像）时看到的内容：

Uploading 1 file... 0s remaining – 84.79%
Do not close the browser until it's completed

然后它就挂起并显示：

Failed to upload 7MB example.jpg: tus: failed to resume upload, caused by [object ProgressEvent], originated from request (method: HEAD, url: https://127.0.0.1:8443/storage/v1/upload/resumable/RklMRV9VUExPQURfQlVDS0VULzdNQiBleGFtcGxlLmpwZy9jZTI2YzMyOC1mNjU4LTQxYWQtYjdkZS0yZTM2NTBhNzk1OTE, response code: n/a, response text: n/a, request id: n/a)

尝试几次后失败了，所以我禁用了 FilePond 中的内置分块，认为这可能会有所帮助，但它仍然发生。我在 CLI 本地仪表板中测试了与上述相同的设置，但对于较大的文件，它也失败了。

这是我的上传代码片段：

<FilePond
    files={field.value}
    oninit={() => setIsFilepondReady(true)}
    onupdatefiles={(fileItems) =>
        field.onChange(fileItems.map((fileItem) => fileItem.file))
    }
    server={{
        process: async (fieldName, file, _metadata, load, error, progress, abort) => {
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const fileName = file.name;
            const uniqueFileName = `${new Date().getTime()}-${fileName}`;
            const generatedFileName = `${userId}/${uniqueFileName}`;

            const upload = new tus.Upload(file, {
                endpoint: `${env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/upload/resumable`,
                retryDelays: FileUploadProps.chunkRetryDelays,
                headers: {
                    authorization: `Bearer ${session?.access_token}`,
                    'x-upsert': 'true',
                },
                uploadDataDuringCreation: true,
                uploadLengthDeferred: false,
                removeFingerprintOnSuccess: true,
                metadata: {
                    bucketName: env.NEXT_PUBLIC_FILE_UPLOAD_BUCKET,
                    objectName: generatedFileName,
                    contentType: 'image/png',
                    cacheControl: '3600',
                },
                chunkSize: 6 * 1024 * 1024, // It must be set to 6MB for now
                onError(caughtError) {
                    error(caughtError.message);
                },
                onProgress(bytesUploaded, bytesTotal) {
                    progress(true, bytesUploaded, bytesTotal);
                },
                onSuccess() {
                    console.log(
                        'Download %s from %s',
                        upload?.options?.metadata?.objectName,
                        upload?.url,
                    );
                    load(upload?.url?.split('/')?.pop() ?? '');
                },
            });

            upload
                .findPreviousUploads()
                .then(function (previousUploads) {
                    if (previousUploads.length) {
                        upload.resumeFromPreviousUpload(previousUploads[0]);
                    }
                    upload.start();
                });

            return {
                abort: () => {
                    upload.abort();
                    abort();
                },
            };
        },
    }}
    {...FileUploadProps}
/>

有人对如何排除故障或解决此问题有任何想法吗？任何帮助将不胜感激！

React Filepond 中使用 TUS 和 Supabase 可恢复上传问题的屏幕录制

Answer 1

解决方案：

问题来自我的

supabase/config.toml

文件，该文件配置 Supabase Local Dev CLI。我之前在一些测试期间为 HTTPS 启用了 TLS。这是我解决问题的方法：

1. 通过更改以下内容在配置文件中禁用 TLS：

[api.tls]
enabled = false

2. 更新了API URL：

api_url = "http://127.0.0.1:54321"

3. 确保在向 Supabase API 发出上传请求的应用程序的环境文件中也更新此更改。