Ошибка запроса ошибки с кодом состояния 413 при загрузке изображения, снятого камерой в приложении React Native

Я использую React-native-image-picker для загрузки изображения на свой сервер:

 const options = {
            title: 'Chọn ảnh đại diện ',
            takePhotoButtonTitle: 'Chụp ảnh',
            chooseFromLibraryButtonTitle: 'Chọn từ thư viện',
            cancelButtonTitle: 'Thoát',
            noData: true


        };
ImagePicker.showImagePicker(options, (response) => {

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                var FormData = require('form-data');
                const data = new FormData();
                data.append('file', {
                    uri: `file://${response.path}`,
                    type: response.type,
                    name: response.fileName

                });
              


                Axios.post('https://api.hoc68.com/api/v1/upload_files', data, {
                    headers: {
                        'Authorization': `Bearer ${stateTree.user.token_key}`,
                        'Content-type': 'multipart/form-data',
                    }
                }).then(res => console.log(res.data)).catch(e => console.log(JSON.stringify(e)))

                console.log(response.path + ' ' + response.uri + ' ' + response.type);
            }
        });

Когда я выбираю изображение из моей галереи загрузок, все в порядке, сервер отправляет ответ с uri. Но когда я выбираю изображение из галереи камеры или когда я делаю снимок камерой своего телефона и загружаю его, Axios выявляет эту ошибку. Когда я ищу эту ошибку в Google, он говорит, что это происходит, когда мой файл слишком велик. Может ли кто-нибудь сказать мне, где мою проблему нужно исправить, в моем коде интерфейса или моем серверном коде?


react-native axios file-upload react-native-image-picker image-upload
person Quang Bình Đinh    schedule 02.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Код ошибки 413 указывает на то, что изображение, которое вы пытаетесь загрузить, слишком велико, как указано здесь Сведения о коде ошибки 413

поэтому, чтобы избежать этого, нужно сжать изображение перед его загрузкой на сервер, вы можете использовать пакет с именем ImageResizer

это пример кода, как вы можете использовать его с axios:

ImageResizer.createResizedImage(uri, height, width, "JPEG", 60, 0).then(
  (response) => {
    let cleanUri =
      Platform.OS === "ios"
        ? response.uri.replace("file:/", "")
        : response.uri;
    data.append("image", {
      uri: cleanUri,
      name: "userImage.jpeg",
      type: "image/jpeg",
    });
    axios
      .post(PROFILE_PHOTOS_UPLOAD, data, config)
      .then((response) => {
        if (response.data.success === true) {
          if (key === PROFILE_IMAGE) {
            image = response.data.data.image;
          } else if (key === COVER_IMAGE) {
            image = response.data.data.cover_image;
          }
          dispatch({
            type: inAppActionTypes.CHANGE_PROFILE_IMAGE,
            key: key,
            url: image,
          });
        } else {
        //bad response
        }
      })
      .catch((err) => {
        // Oops, something went wrong. Check that the filename is correct and
        console.log("error while compressing the image");
        console.log(err);
       
      });
person Mohammad Odeh    schedule 05.11.2020