Question

我寻求专家的帮助，我是 React Native 的新手并且遇到了这样的问题。 enter image description here 尝试使用 react-native-image-crop-picker 通过单击按钮以这种方式发送文件我已经在 Next js 上将文件发送到服务器，一切正常，但现在我需要制作一个移动版本，但它没有按我预期的那样工作。

import { useMutation } from '@apollo/client';
import React, { useCallback, useEffect, useState } from 'react';
import {
  Image,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from "react-native-image-crop-picker"
import { ReactNativeFile } from 'apollo-upload-client';
import { gql } from "@apollo/client";

export const mutationSendPhotoForProcessing = gql`
mutation SendPhotoForProcessing($file: Upload!){
  send_photo_for_processing(file: $file)
}
`
const Home = () => {
  const [SendPhoto] = useMutation(mutationSendPhotoForProcessing);

  const onButtonPress = async () => {
    let file = await ImagePicker.openPicker({
      cropping: true
    });

    const { data } = await SendPhoto({
      variables: {
        file: new ReactNativeFile({
          name: 'a.jpg',
          type: 'image/jpg',
          uri: file.path,
        }),
      }
    });
  };

  return (
    <SafeAreaView>
      <StatusBar barStyle={'dark-content'} />
      <ScrollView>
        <View>
          <Button
            onPress={() => alert()}
            icon={
              <Icon name="upload" color={"white"} size={20} />
            }
          />
          <Button
            onPress={() => onButtonPress()}
            title="Upload image"
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default Home;

反应原生。上传文件 apollo 客户端

0 个答案: