Как использовать fetch для загрузки двоичного файла в react native с помощью react-native-image-crop-picker

#reactjs #react-native #react-native-android #blob #fetch-api

Вопрос:

У меня возникли некоторые проблемы с загрузкой файла на сервер,потому что я не могу найти способ преобразования img в двоичную структуру данных.

запрос на успех, подобный этому, в чванстве

 // upload function 
const UploadImg = async (img: any) => {
  // img  from  react-native-image-crop-picker
  const fromData = new FormData();
  fromData.append('file', `${img.data}`);

  return fetch(`${API_URL_R}/upload`, {
    method: 'POST',
    body: fromData, // this should be binary 
  })
};

// use
// import ImagePicker from  'react-native-image-crop-picker'
 ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
      includeBase64: true,
    }).then(async image => {
      await UploadImg(image);
    });

Ответ №1:

Из изображения, полученного в ImagePicker.openPicker, вы получите изображение.путь, изображение.имя файла и изображение.mime, а затем вы можете загрузить изображение, как показано ниже

Примечание: имя файла также может быть получено как let filename = путь.подстрока(путь.lastIndexOf(‘/’) 1, путь.длина)

Загрузить Изображение

  const UploadImg = async () => {

 const fromData = new FormData();

  fromData.append("file", {
    name: filename,
    type: mime,
    uri:
      Platform.OS === "android"
        ? filepath
        : filepath.replace("file://", "")
  });
 
var url = uploadImageUrl

const response = await fetch(url, {
method: 'POST',
headers: {   
    "Content-Type": "multipart/form-data",
    Accept: "application/json",
    Authorization: authToken
  },
body: fromData, 
})

}