如何通过HTML输入框在Svelte.js中向PocketBase上传图片？

你的代码存在几个关键问题，以下是修正后的实现方案，分两种方式：

方式一：修正Axios上传逻辑 #

在Svelte中操作DOM元素建议用bind:this而非直接getElementById，同时文件上传必须通过FormData对象传递，还要阻止表单默认提交行为：

<script lang="ts">
    import { currentUser, pb } from './pocketbase';
    import axios from 'axios'; // 改用ES模块导入方式

    let fileInput: HTMLInputElement; // 声明变量绑定DOM元素

    async function uploadFile(e: SubmitEvent) {
        e.preventDefault(); // 阻止表单默认刷新行为
        
        if (!fileInput.files || fileInput.files.length === 0) {
            return; // 没有选择文件时直接返回
        }

        const formData = new FormData();
        formData.append('image', fileInput.files[0]); // 键名需与PocketBase集合内的字段名一致

        try {
            await axios.post('http://127.0.0.1:8090/api/collections/images/records', formData, {
                headers: {
                    'Authorization': `Bearer ${pb.authStore.token}`, // 集合需认证时带上token
                    'Content-Type': 'multipart/form-data'
                }
            });
            alert('上传成功');
            fileInput.value = ''; // 清空输入框
        } catch (err) {
            console.error('上传失败:', err);
            alert('上传失败');
        }
    }
</script>

<form on:submit={uploadFile}>
    <input type="file" name="fileInput" bind:this={fileInput} accept="image/*">
    <button type="submit">Upload</button>
</form>

方式二：使用PocketBase官方SDK（推荐） #

PocketBase SDK已封装文件上传方法，无需手动编写Axios请求，更简洁可靠：

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

    let fileInput: HTMLInputElement;

    async function uploadFile(e: SubmitEvent) {
        e.preventDefault();
        
        if (!fileInput.files || fileInput.files.length === 0) {
            return;
        }

        try {
            // 直接调用SDK的create方法，自动处理文件上传
            const record = await pb.collection('images').create({
                image: fileInput.files[0]
            });
            console.log('上传成功，记录ID:', record.id);
            alert('上传成功');
            fileInput.value = '';
        } catch (err) {
            console.error('上传失败:', err);
            alert('上传失败');
        }
    }
</script>

<form on:submit={uploadFile}>
    <input type="file" name="fileInput" bind:this={fileInput} accept="image/*">
    <button type="submit">Upload</button>
</form>

关键注意事项 #

• 确保PocketBase后台的images集合中，已创建名为image的文件类型字段
• 若集合设置权限，需确保当前用户拥有创建记录的权限（可在PocketBase后台集合权限中配置）
• accept="image/*"可限制用户仅选择图片文件，提升交互体验

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