Как загрузить несколько файлов React Native

Потратив большую часть недели на борьбу с пакетами React-Native и встроенными реализациями JavaScript, позволяющими пользователям загружать фотографии со своего телефона в базу данных пакетами, я наконец нашел простое собственное решение, которое быстро и легко в использовании. Это решение было получено методом проб и ошибок, через который, я надеюсь, никому больше не придется проходить.

Настроить форму:

Нашим первым шагом в загрузке наших файлов как связки будет создание объекта FormData.

let data = new FormData();

Это позволит нам добавлять и отправлять наши данные как multipart / form-data.

Заполните форму:

Следующее, что нам нужно сделать, это добавить данные, которые мы хотим отправить, в нашу форму. Это эффективно позволяет нам объединить нашу информацию в легко передаваемый составной объект:

this.state.selectedImages.forEach((item, i) => {
  data.append("doc[]", {
    uri: item.uri,
    type: "image/jpeg",
    name: item.filename || `filename${i}.jpg`,
  });
});

После того, как мы закончим добавление соответствующих данных в нашу FormData, мы можем продолжить и отправить наши данные, используя собственный метод JavaScript fetch.

Отправить данные:

К счастью для нас, метод fetch в JavaScript позволяет нам отправлять multipart / form-data так же легко, как и любые другие данные.

fetch(`${config.apiBase}/load/${this.props.id}/uploadconfirmation`, {
  method: "post",
  headers: {
    Accept: "application/x-www-form-urlencoded",
    Authorization: `Bearer ${this.props.user.token}`,
  },
  body: data,
}).then(res => res.json())
  .then(res => {
    Alert.alert(
      "Success",
      "Bill of Loading Uploaded Successfully!",
      [{ text: "OK", onPress: () => that.props.close() }],
      { cancelable: false }
    );
  })
  .catch(err => {
    console.error("error uploading images: ", err);
  });

Вот и все! Если это помогло вам избежать головной боли, не стесняйтесь аплодировать этому посту!