如何通过GraphQL将本地图片直接上传至imgproxy？

完全可以实现通过GraphQL直接上传图片到imgproxy，下面是对应你参考的GCS上传教程思路的落地步骤：

1. 先配置好imgproxy的上传功能 #

imgproxy默认未开启上传，需要通过环境变量启用并配置存储后端（比如本地磁盘、S3、GCS等）：

• 开启上传：设置IMGPROXY_ENABLE_UPLOADS=true
• 指定存储后端：比如用本地存储就设置IMGPROXY_UPLOAD_STORAGE_TYPE=local，同时配置IMGPROXY_UPLOAD_LOCAL_ROOT=/path/to/storage
• 可选配置：设置允许的文件类型IMGPROXY_ALLOWED_MIME_TYPES=image/jpeg,image/png、最大文件大小IMGPROXY_MAX_UPLOAD_FILE_SIZE=10485760（10MB）等

2. 调整GraphQL Schema #

添加支持文件上传的Mutation，使用GraphQL标准的Upload标量类型（不同服务器实现可能需要单独引入，比如Apollo Server需导入graphql-upload的Upload）：

type Mutation {
  uploadImageToImgproxy(file: Upload!): UploadResult!
}

type UploadResult {
  url: String! # 上传后可通过imgproxy访问的图片URL
  storageKey: String! # imgproxy返回的存储标识，用于后续操作
}

3. 实现GraphQL上传Resolver #

在Resolver中处理前端传来的文件流，直接转发到imgproxy的上传接口（默认是POST /upload，可通过IMGPROXY_UPLOAD_ENDPOINT自定义）。以下是Node.js/Apollo Server的示例：

const fetch = require('node-fetch');

async function uploadImageToImgproxy(_, { file }) {
  const { createReadStream, mimetype } = await file;
  const fileStream = createReadStream();

  // 调用imgproxy上传接口
  const uploadRes = await fetch('http://你的imgproxy实例地址/upload', {
    method: 'POST',
    headers: {
      'Content-Type': mimetype,
      // 如果imgproxy开启了签名认证，添加签名头
      // 'X-Imgproxy-Signature': '生成的合法签名'
    },
    body: fileStream
  });

  if (!uploadRes.ok) {
    throw new Error(`上传失败: ${uploadRes.statusText}`);
  }

  const uploadData = await uploadRes.json();
  // 返回可直接访问的imgproxy图片URL和存储键
  return {
    url: `http://你的imgproxy实例地址/${uploadData.key}`,
    storageKey: uploadData.key
  };
}

4. 前端上传逻辑调整 #

和GCS上传的前端逻辑类似，使用支持文件上传的GraphQL客户端链接（比如Apollo Client的createUploadLink）：

import { ApolloClient, InMemoryCache, createUploadLink, gql } from '@apollo/client';

const client = new ApolloClient({
  link: createUploadLink({ uri: '/你的GraphQL接口地址' }),
  cache: new InMemoryCache()
});

// 上传图片函数
async function uploadImage(file) {
  const { data } = await client.mutate({
    mutation: gql`
      mutation UploadImage($file: Upload!) {
        uploadImageToImgproxy(file: $file) {
          url
          storageKey
        }
      }
    `,
    variables: { file }
  });
  return data.uploadImageToImgproxy;
}

关键注意事项 #

• 跨域配置：确保imgproxy的CORS规则允许你的GraphQL服务器或前端域名发起请求，避免跨域错误。
• 权限控制：如果imgproxy设置了访问认证，上传请求需携带合法的签名或API密钥，防止未授权上传。
• 大小限制：同步配置imgproxy的IMGPROXY_MAX_UPLOAD_FILE_SIZE和GraphQL服务器的文件大小限制（比如Apollo Server的maxFileSize）。

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