URQL是否有Apollo ReactNativeFile的等价实现？React Native下基于URQL的Expo图片选择器文件上传方案咨询

刚好我之前也遇到过类似的URQL图片上传问题，给你整理一下实用的解决方案：

1. URQL没有专门的ReactNativeFile，但可以用FormData + File实现上传 #

URQL本身并没有提供像Apollo那样的ReactNativeFile封装，但它完全支持发送multipart/form-data请求——这正是GraphQL文件上传的标准方式。我们只需要把Expo选择的图片转换成标准的JS File对象，再用FormData包装后发送即可。

2. 将Expo ImagePicker的uri/base64转换为JS File的两种方法 #

方法一：从本地uri创建File（推荐） #

Expo ImagePicker返回的uri是本地文件路径，我们可以用expo-file-system读取文件内容，再转换成Blob和File：

import * as FileSystem from 'expo-file-system';

// 把本地uri转成File对象的工具函数
async function uriToFile(uri, mimeType, fileName = 'picture.jpg') {
  // 读取本地文件为base64格式
  const base64Content = await FileSystem.readAsStringAsync(uri, { encoding: 'base64' });
  // 将base64转成Blob
  const blob = await fetch(`data:${mimeType};base64,${base64Content}`).then(res => res.blob());
  // 最终创建File对象
  return new File([blob], fileName, { type: mimeType });
}

// 结合你的图片选择逻辑使用
const handleImagePick = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({ 
    mediaTypes: ImagePicker.MediaTypeOptions.Images, 
    allowsEditing: true, 
    base64: true, 
    aspect: [1, 1], 
    quality: 1, 
  }); 
  if (result.cancelled || !result.uri) return;

  // 转换为File
  const imageFile = await uriToFile(result.uri, result.type);
  // 后续用于上传
};

方法二：从base64直接创建File #

如果你的代码已经拿到了base64（比如开启了base64: true），可以直接把base64转换成File：

// base64转File的工具函数
function base64ToFile(base64Str, mimeType, fileName = 'picture.jpg') {
  // 解码base64字符串
  const byteChars = atob(base64Str);
  const byteArrays = [];
  
  // 按切片处理，避免内存溢出
  for (let offset = 0; offset < byteChars.length; offset += 512) {
    const slice = byteChars.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    byteArrays.push(new Uint8Array(byteNumbers));
  }
  
  // 转成Blob再创建File
  const blob = new Blob(byteArrays, { type: mimeType });
  return new File([blob], fileName, { type: mimeType });
}

// 使用示例
if (!result.cancelled) {
  const imageFile = base64ToFile(result.base64, result.type);
}

3. 在URQL中发送文件上传请求 #

GraphQL文件上传需要按照标准格式构造FormData，把查询语句、变量映射和文件一起发送。这里给你完整的URQL mutation示例：

import { useMutation } from 'urql';

// 定义上传的GraphQL mutation
const UPLOAD_IMAGE_MUTATION = `
  mutation UploadImage($file: Upload!) {
    uploadImage(file: $file) {
      id
      url
      fileName
    }
  }
`;

function ImageUploader() {
  const [uploadResult, uploadImage] = useMutation(UPLOAD_IMAGE_MUTATION);

  const handleUpload = async (imageResult) => {
    if (imageResult.cancelled || !imageResult.uri) return;
    
    // 先把图片转成File对象
    const imageFile = await uriToFile(imageResult.uri, imageResult.type);
    
    // 按照GraphQL文件上传标准构造FormData
    const formData = new FormData();
    formData.append('operations', JSON.stringify({
      query: UPLOAD_IMAGE_MUTATION,
      variables: { file: null } // 用null占位，文件通过map关联
    }));
    formData.append('map', JSON.stringify({ '0': ['variables.file'] }));
    formData.append('0', imageFile);

    // 发送上传请求
    const response = await uploadImage({}, {
      fetchOptions: {
        method: 'POST',
        body: formData,
        // 如果需要认证，这里可以加Authorization头
        // headers: { Authorization: `Bearer ${token}` }
      },
    });

    // 处理上传结果
    if (response.data) {
      console.log('图片上传成功:', response.data.uploadImage);
      // 这里可以调用你的onSuccessful回调
      // await onSuccessful(response.data.uploadImage);
    } else if (response.error) {
      console.error('上传失败:', response.error.message);
    }
  };

  // 图片选择触发逻辑
  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({ 
      mediaTypes: ImagePicker.MediaTypeOptions.Images, 
      allowsEditing: true, 
      base64: true, 
      aspect: [1, 1], 
      quality: 1, 
    });
    await handleUpload(result);
  };

  return (
    <Button title="选择并上传图片" onPress={pickImage} />
  );
}

注意事项 #

• 你的Node服务器需要支持GraphQL文件上传，比如使用graphql-upload中间件（如果是Express或Apollo Server）。
• 确保服务器端的mutation定义中$file参数类型是Upload（这是GraphQL文件上传的标准标量类型）。

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