使用Appsmith上传图片至Supabase存储后文件损坏的问题排查

问题根源 #

Appsmith文件选择器返回的FilePicker1.files[0].data是base64编码的字符串，而非原始二进制数据。直接上传该字符串会导致Supabase存储的是base64文本而非图片二进制，最终文件体积变大且无法正常解析。

修复代码 #

将base64字符串转换为原始二进制Blob后再上传：

export default {
function: async () => {
    const sup = JSObject1.client;
    const selectedFile = FilePicker1.files[0];
    
    // 剥离base64前缀并转换为Blob
    const base64Payload = selectedFile.data.split(',')[1];
    const byteStr = atob(base64Payload);
    const byteArr = new Uint8Array(byteStr.length);
    for (let i = 0; i < byteStr.length; i++) {
        byteArr[i] = byteStr.charCodeAt(i);
    }
    const imageBlob = new Blob([byteArr], { type: selectedFile.type });

    // 上传二进制Blob到Supabase
    const { data, error } = await sup
        .storage
        .from('image')
        .upload(selectedFile.name, imageBlob, { contentType: selectedFile.type });
    
    console.log(error);
    console.log(data);
},

核心注意事项 #

• 不要固定contentType为image/png，直接使用selectedFile.type适配所有上传的图片格式
• 必须移除base64前缀（data:image/xxx;base64,），否则二进制转换会失败
• 转换后的Blob是原始图片数据，上传后文件体积与本地文件一致，可正常打开

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