移动端用Svelte向Pocketbase上传刚拍摄照片失败求助

问题描述 #

使用Svelte向Pocketbase后端添加带照片的新记录时，仅能成功上传设备中已有的图片，刚拍摄的照片无法完成上传，安卓和iPhone设备均存在该问题，且移动端难以获取控制台错误信息。

原代码如下：

<script lang="ts">
    import { pb } from '../lib/pocketbase';

    export let id: string;

    let new_object_name: string;
    let new_object_img: FileList;

    async function addObject(){
        let formData = new FormData();
        formData.append("name", new_object_name);
        formData.append("location_id", id);
        formData.append("photo", new_object_img[0]);
        await pb.collection('objects').create(formData);

        new_object_name = "";
        new_object_img = null;
        document.getElementById('new_obj_file').value = "";
    }
</script>

<form on:submit|preventDefault>
    <input type="text" placeholder="Object Name" bind:value={new_object_name}/>
    <input type="file" id="new_obj_file" accept="image/jpg, image/jpeg, image/png, image/svg+xml, image/gif" bind:files={new_object_img}/>
    <button id="add_object" on:click={addObject}>add object</button>
</form>

问题原因分析 #

1. 移动端刚拍摄的图片可能仍处于系统临时写入状态，直接读取会导致文件访问异常
2. 未对图片文件做类型、大小校验，可能超出Pocketbase默认文件限制
3. FormData追加文件时未明确指定文件名和MIME类型，导致后端解析失败

解决方案 #

1. 完善文件验证与就绪检查 #

修改文件输入控件，添加相机调用指定，同时监听文件变化确保文件就绪：

<script lang="ts">
    import { pb } from '../lib/pocketbase';

    export let id: string;

    let new_object_name: string;
    let new_object_img: FileList;
    let isFileReady = false;

    async function handleFileChange(e: Event) {
        const file = (e.target as HTMLInputElement).files?.[0];
        if (!file) return;

        // 验证文件类型
        if (!file.type.startsWith('image/')) {
            alert('请选择有效的图片文件');
            return;
        }

        // 限制文件大小（示例：5MB）
        const maxSize = 5 * 1024 * 1024;
        if (file.size > maxSize) {
            alert('图片大小不能超过5MB');
            return;
        }

        isFileReady = true;
    }

    async function addObject(){
        if (!isFileReady || !new_object_img?.[0]) {
            alert('请选择有效的图片');
            return;
        }

        let formData = new FormData();
        formData.append("name", new_object_name);
        formData.append("location_id", id);
        // 明确指定文件名和MIME类型
        formData.append("photo", new_object_img[0], new_object_img[0].name);
        
        try {
            await pb.collection('objects').create(formData);
            // 重置表单状态
            new_object_name = "";
            new_object_img = null;
            (document.getElementById('new_obj_file') as HTMLInputElement).value = "";
            isFileReady = false;
            alert('上传成功');
        } catch (err) {
            // 移动端用alert展示错误信息
            alert(`上传失败：${(err as Error).message}`);
            console.error(err);
        }
    }
</script>

<form on:submit|preventDefault>
    <input type="text" placeholder="Object Name" bind:value={new_object_name}/>
    <input 
        type="file" 
        id="new_obj_file" 
        accept="image/jpg, image/jpeg, image/png"
        capture="environment" <!-- 强制调用后置摄像头 -->
        bind:files={new_object_img}
        on:change={handleFileChange}
    />
    <button id="add_object" on:click={addObject}>add object</button>
</form>

2. 可选：添加前端图片压缩 #

若原始拍摄照片尺寸过大，可添加压缩处理避免超出后端限制：

// 新增图片压缩函数
async function compressImage(file: File): Promise<File> {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            if (!ctx) return resolve(file);

            // 按比例压缩到最大宽度1920px
            const maxWidth = 1920;
            const scale = maxWidth / img.width;
            canvas.width = maxWidth;
            canvas.height = img.height * scale;

            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            
            canvas.toBlob((blob) => {
                if (!blob) return resolve(file);
                const compressedFile = new File([blob], file.name, { type: file.type });
                resolve(compressedFile);
            }, file.type, 0.8); // 0.8为压缩质量（0-1）
        };
    });
}

修改handleFileChange函数调用压缩：

async function handleFileChange(e: Event) {
    const file = (e.target as HTMLInputElement).files?.[0];
    if (!file) return;

    if (!file.type.startsWith('image/')) {
        alert('请选择有效的图片文件');
        return;
    }

    // 压缩图片
    const compressedFile = await compressImage(file);
    // 构造新的FileList赋值给new_object_img
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(compressedFile);
    new_object_img = dataTransfer.files;
    
    isFileReady = true;
}

调试建议 #

1. 利用try/catch捕获错误并通过alert展示，解决移动端无法查看控制台的问题
2. 检查Pocketbase后台的文件上传配置，确认允许的文件大小、类型与前端匹配
3. 先测试小尺寸拍摄照片，逐步排查是否为文件大小或写入时机问题

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