Supabase Storage可恢复文件上传在6MB处持续停滞求助

问题现象 #

• 小于6MB的文件上传正常，超过6MB的文件卡在对应6MB分块的进度位置
• 本地Supabase CLI仪表盘上传7MB图片时，进度停在84.79%后报错：

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}
/>

排查思路建议 #

• 本地Supabase服务配置检查：由于CLI仪表盘也无法上传大文件，优先排查服务端配置。打开supabase/config.toml，检查存储模块的max_upload_size、max_chunk_size等参数是否限制了大文件；同时确认CLI版本是否为最新，尝试更新Supabase CLI到最新版
• 网络与HTTPS证书问题：报错显示HEAD请求无响应码，可能是本地防火墙、代理拦截了请求，或者自签HTTPS证书未被浏览器信任。可以尝试改用HTTP协议测试（修改Supabase配置禁用HTTPS），或在浏览器中手动信任本地证书
• TUS参数与Supabase兼容性：
  • 检查uploadDataDuringCreation参数：Supabase的resumable接口是否要求该值为false？尝试修改为false后测试
  • 动态设置contentType：当前代码强制设为image/png，但上传的是jpg文件，可能导致服务端处理异常，改为file.type动态获取
• 服务端日志排查：启动Supabase时添加--debug参数（supabase start --debug），查看存储服务的详细日志，定位HEAD请求失败的具体原因
• Token有效性验证：确认session的access_token在分块上传过程中未过期，可在请求头中添加日志，检查每次分块请求的token是否有效

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