在本机中使用 apollo-upload-client 将图像和视频上传到服务器

Question

我正在使用 apollo 客户端和服务器，图像从服务器上传到 Cloudinary 没问题。但是在我尝试将文件发送到服务器的应用程序中，它显示 createReadStream is not a function, code: INTERNAL_SERVER_ERROR。我正在使用 react-native 的图像选择器依赖项，它为我提供了文件路径和其他文件规范以及 base64，无论我发送整个文件还是仅发送路径或 base64，它都不起作用。

文件没有正确通过

我的 apolloConfig.js 是：


import { ApolloClient, ApolloLink } from "@apollo/client";
import { Observable } from "apollo-link";
import { withClientState } from "apollo-link-state";
import { InMemoryCache } from "apollo-cache-inmemory";
import { onError } from "@apollo/client/link/error";
import { createUploadLink } from "apollo-upload-client";
import { buildAxiosFetch } from "@lifeomic/axios-fetch";
import { Config } from "App/Config";
import axios from "axios";
import AsyncStorage from "@react-native-community/async-storage";

const SERVER_URL = Config.API_URL;
const cache = new InMemoryCache({});

const httpLink = createUploadLink({
  uri: SERVER_URL,
  credentials: "same-origin",
  fetch: buildAxiosFetch(axios, (config, input, init) => ({
    ...config,
    onUploadProgress: init.onUploadProgress,
  })),
});

const request = async (operation) => {
  const token = await AsyncStorage.getItem("token");
  console.log(token);
  operation.setContext({
    headers: {
      authorization: token ? `Bearer ${token}` : "",
    },
  });
};

export const requestLink = new ApolloLink(
  (operation, forward) =>
    new Observable((observer) => {
      let handle;
      Promise.resolve(operation)
        .then((oper) => request(oper))
        .then(() => {
          handle = forward(operation).subscribe({
            next: observer.next.bind(observer),
            error: observer.error.bind(observer),
            complete: observer.complete.bind(observer),
          });
        })
        .catch(observer.error.bind(observer));
      return () => {
        if (handle) handle.unsubscribe();
      };
    })
);

const link = ApolloLink.from([
  onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      console.log("[graphQLErrors]", graphQLErrors);

      graphQLErrors.map(({ message, extensions }) => {
        console.log(
          `[GraphQL error]: Message: ${message}, code: ${extensions.code}`
        );
        if (extensions.code === "UNAUTHENTICATED") {
          AsyncStorage.clear();
        }
      });
    }
    if (networkError) {
      console.log(`[Network error]: ${networkError}`);
    }
  }),
  requestLink,
  httpLink,
]);

const client = new ApolloClient({ link, cache });

export { client };

我的uploadAvatar.js

try {
        const { data } = await uploadImage({
          variables: { file: image },
        });
        console.log(data);
      } catch (error) {
        console.log(error);
        Toast.show({
          type: "error",
          position: "bottom",
          text1: "Authentication Failed",
          text2: "Something went wrong while uploading photo!",
        });
      }
    });
  };

Answer 1

您必须将文件转换为 ReactNativeFile，正如 apollo-upload-client 文档中提到的那样

import { ReactNativeFile } from 'apollo-upload-client';

const file = new ReactNativeFile({
  uri: uriFromCameraRoll,
  name: 'a.jpg',
  type: 'image/jpeg',
});

更多信息：https://github.com/jaydenseric/apollo-upload-client

在本机中使用 apollo-upload-client 将图像和视频上传到服务器

Upload Image and Video to server using apollo-upload-client in react native

javascript

file-upload

graphql

react-native

apollo-client