React Native - Axios- Expo Image picker - 上传图片到服务器不工作

Question

我正在为 UI 界面使用 expo-image-picker 将图像上传到我的应用程序。当我想将图像上传到后端时，我发现了一些困难。图片没有上传，我不明白原因。我已经尝试了一切，但似乎没有任何效果。

1. 我如何将数据设置为图像状态

      const showImagePicker = async () => {
        Promise.all([ImagePicker.requestMediaLibraryPermissionsAsync(), ImagePicker.requestCameraPermissionsAsync()]).then(result => {
          result.forEach(permission => {
            return !permission.granted;
          });
        });
   
        const result: ImagePicker.ImageInfo = (await ImagePicker.launchImageLibraryAsync({
          base64: true,
        })) as ImagePicker.ImageInfo;
   
        const uriParts = result.uri.split('.');
        const fileType = uriParts[uriParts.length - 1];
   
        if (!result.cancelled) {
          setPickedImagePath({
            uri: Platform.OS === 'android' ? result.uri : result.uri.replace('file://', ''),
            name: `photo.${fileType}`,
            type: `application/${fileType}`,
          });
        }
      };
    };
   

   2. 我如何将数据附加到 formData

      const createRequestCall = async () => {
        const formData = new FormData();
        formData.append('file', pickedImage.uri);
        formData.append('data2', 'test');
        formData.append('data3', '123');
        formData.append('data4', 'test');
      
        dispatch(uploadPhoto(formData));
      };
      

   3. 如果文件正在加载，我如何发送请求。

export const uploadPhoto=
      (photoRequest: FormData) =>
      async (dispatch: Dispatch<Action>): Promise<void> => {
        dispatch({ type: ActionTypes.API_LOADING, payload: apiIsLoading });
        const response = await Apis.requestPhoto(fileRequest);
        dispatch({ type: ActionTypes.API_LOADING, payload: apiIsNotLoading });
      };

4. 我发送到后端的请求。

async requestPhoto(data: FormData): Promise<IDetails> {
    const response = await http.post<IDetails, AxiosResponse<ITripDetailsResponse>>(${baseURL}/upload/image, data, {
      headers: { 'Content-Type': 'multipart/form-data' },
      transformRequest(formData, headers) {
        return data;
      },
    });
    return response.data;
  },

Answer 1

我认为，由于平台的原因，使用

axios

发送图像是不可能的。

但是，好消息是

Expo

已经有了 expo-file-system 包。 使用它，您可以将图像上传到后端。

例子：

import * as FileSystem from 'expo-file-system';
const imageUploading = async () => {
    const data = await FileSystem.uploadAsync(
      URL,
      image, // uri of the image 
      {
        httpMethod: 'POST',
        uploadType: FileSystem.FileSystemUploadType.MULTIPART,
        fieldName: 'file',
      },
    );
};

Answer 2

发送整个图像对象工作正常：

const createRequestCall = async () => {
  const formData = new FormData();
  formData.append('file', pickedImage);
  ...

  dispatch(uploadPhoto(formData));
};

我用的是这种：

interface ImageType {
  uri: string;
  name: string;
  type: string;
}

即使 Typescript 出错，附加该对象也能正常工作。

FormData.append

期待

string | Blob

，但我还没有弄清楚如何提供我的自定义图像类型而不会出错。

Answer 3

在我的 api 调用中使用 fetch 而不是 axios 找到了解决方案