在SvelteKit+TS中通过Imgur API以Base64格式上传图片

首先明确：FileReader是浏览器专属API，Node.js环境下不存在，所以后端使用会报“未定义”错误，得换Node环境兼容的方式处理文件二进制数据。

下面给出两种可行方案，优先推荐方案2（更高效）：

方案1：将文件转Base64后上传 #

通过File.arrayBuffer()获取二进制数据，转成Node.js的Buffer再生成Base64字符串，符合Imgur API的要求：

// uploadPhoto/+page.server.ts
import type { Actions } from './$types';
import ImgurClient from 'imgur';

export const actions: Actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const file = formData.get('photo') as File;

    if (!file) return { error: '未选择文件' };

    // 转Base64
    const arrayBuffer = await file.arrayBuffer();
    const buffer = Buffer.from(arrayBuffer);
    const base64Str = buffer.toString('base64');
    // 拼接Imgur要求的data URI前缀
    const imgurBase64 = `data:${file.type};base64,${base64Str}`;

    // 初始化Imgur客户端
    const client = new ImgurClient({ clientId: '你的Imgur Client ID' });
    
    // 上传到Imgur
    const uploadResult = await client.upload({
      image: imgurBase64,
      type: 'base64',
      name: file.name
    });

    return uploadResult.success 
      ? { success: true, imgUrl: uploadResult.data.link }
      : { error: uploadResult.data.error };
  }
};

方案2：直接上传Buffer（推荐） #

Base64会增加33%左右的体积，直接传原始Buffer更高效，Imgur SDK原生支持：

// uploadPhoto/+page.server.ts
import type { Actions } from './$types';
import ImgurClient from 'imgur';

export const actions: Actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const file = formData.get('photo') as File;

    if (!file) return { error: '未选择文件' };

    // 获取文件Buffer
    const arrayBuffer = await file.arrayBuffer();
    const fileBuffer = Buffer.from(arrayBuffer);

    // 初始化Imgur客户端
    const client = new ImgurClient({ clientId: '你的Imgur Client ID' });
    
    // 直接上传Buffer
    const uploadResult = await client.upload({
      image: fileBuffer,
      type: 'buffer',
      name: file.name,
      title: '通过SvelteKit上传'
    });

    return uploadResult.success 
      ? { success: true, imgUrl: uploadResult.data.link }
      : { error: uploadResult.data.error };
  }
};

注意事项 #

1. 先安装Imgur SDK：npm install imgur
2. 去Imgur开发者平台申请你的Client ID，确保权限配置正确（公开上传仅需Client ID即可）
3. 前端表单的文件字段名要和后端formData.get('photo')的参数一致（比如前端input的name是photo）

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