TypeError: Network request failed при отправке изображения

Question

При отправке запроса выбрасывается ошибка типа TypeError: Network request failed. Код для получения изображения

const [previewImage, setPreviewImage] = useState<ImageAsset | null>(null);

const pickImage = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('Ошибка', 'Необходимы разрешения для доступа к галерее');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled && result.assets && result.assets.length > 0) {
      const asset = result.assets[0];
      setPreviewImage({
        uri: asset.uri,
        name: asset.fileName || `image_${Date.now()}.jpg`,
        type: asset.type || 'image/jpeg',
      });
    }
  };

interface ImageAsset {
  uri: string;
  name?: string;
  type?: string;
}

Отправка

const formData = new FormData();
pictures.forEach((image, index) => {
        const file = {
            uri: image.uri,
            name: image.name || `image_${Date.now()}_${index}.jpeg`,
            type: image.type,
        };
        formData.append(`pictures`, file as any);
    });

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${tokens?.accessToken}`,
            'Content-Type': 'multipart/form-data',
        },
        body: formData,
    });

Answer 1

Данная ошибка возникала потому что asset[i].type возвращает не строку вида 'image/(jpeg, png, jpg)', как я думал но поленился проверить и по этому провозился с данной ошибкой почти неделю, а одну из строк типа 'image' | 'video' | 'livePhoto' | 'pairedVideo' как написано в документации. Из-за чего при добавлении изображение в FormData было что-то типа

const file = {
    url: image.uri, //Правильно
    name: image.name || 'image.jpeg', //Правильно
    type: image.type //Ошибка, ожидается строка типа `image/jpeg`, получаем строку как сказано в документации.
} as any

Следовательно ошибка TypeError: Network request failed и куча потраченного времени.

Заменил

setPreviewImage({
    uri: asset.uri,
    name: asset.fileName || `image_${Date.now()}.jpg`,
    type: asset.type || 'image/jpeg',
  });

На

setPreviewImage({
    uri: asset.uri,
    name: asset.fileName || `image_${Date.now()}.jpg`,
    type: `image/${asset.fileName?.split('.').pop()}` || 'image/jpeg',
  });

И теперь все работает. Мораль, будьте внимательны и не повторяйте моих ошибок.

БЛОГ НА HUSL

TypeError: Network request failed при отправке изображения

Ответы (1 шт):