Как загрузить файл на сервер с помощью реагирования

Ответ 1

В React Native встроена загрузка файлов.

Пример из кода React Native:

var photo = {
    uri: uriFromCameraRoll,
    type: 'image/jpeg',
    name: 'photo.jpg',
};

var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');

var xhr = new XMLHttpRequest();
xhr.open('POST', serverURL);
xhr.send(body);

Ответ 2

Мое решение использует API-интерфейс Fetch и FormData.

Протестировано на Android.

const file = {
  uri,             // e.g. 'file:///path/to/file/image123.jpg'
  name,            // e.g. 'image123.jpg',
  type             // e.g. 'image/jpg'
}

const body = new FormData()
body.append('file', file)

fetch(url, {
  method: 'POST',
  body
})

Ответ 3

Я написал что-то вроде этого. Проверьте https://github.com/kamilkp/react-native-file-transfer

Ответ 4

Имеется несколько возможных альтернатив. Во-первых, вы можете использовать XHR polyfill:

http://facebook.github.io/react-native/docs/network.html

Во-вторых, просто задайте вопрос: как загрузить файл в Obj-C? Ответьте на это, а затем вы можете просто реализовать собственный модуль, чтобы вызвать его из JavaScript.

Далее обсуждается все это на этой проблеме Github.

Ответ 5

Ответ Том не помог мне. Поэтому я внедрил собственный FilePickerModule, который помогает мне выбрать файл, а затем использовать пакет для передачи реакции-native-file-transfer для его загрузки. FilePickerModule возвращает путь к выбранному файлу (FileURL), который используется для передачи реакции-native-file-transfer для его загрузки.  Здесь код:

var FileTransfer = require('@remobile/react-native-file-transfer');
var FilePickerModule = NativeModules.FilePickerModule;

      var that = this;
      var fileTransfer = new FileTransfer();
      FilePickerModule.chooseFile()
      .then(function(fileURL){
        var options = {};
        options.fileKey = 'file';
        options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
        options.mimeType = 'text/plain';
        var headers = {
          'X-XSRF-TOKEN':that.state.token
        };
        options.headers = headers;
        var url = "Set the URL here" ;
        fileTransfer.upload(fileURL, encodeURI(url),(result)=>
        {
              console.log(result);
          }, (error)=>{
              console.log(error);
          }, options);
     })

Ответ 6

Просто, основываясь на ответе Dev1, это хороший способ загрузки файлов из собственного кода, если вы также хотите показать ход загрузки. Это чистый JS, так что на самом деле это будет работать с любым файлом Javascript.

(Обратите внимание, что на шаге 4 вы должны заменить переменные внутри строк типом и окончанием файла. При этом вы можете просто удалить эти поля.)

Вот суть я сделал на Github: https://gist.github.com/nandorojo/c641c176a053a9ab43462c6da1553a1b

1. для загрузки одного файла:

// 1. initialize request
const xhr = new XMLHttpRequest();
// 2. open request
xhr.open('POST', uploadUrl);
// 3. set up callback for request
xhr.onload = () => {
    const response = JSON.parse(xhr.response);

    console.log(response);
    // ... do something with the successful response
};
// 4. catch for request error
xhr.onerror = e => {
    console.log(e, 'upload failed');
};
// 4. catch for request timeout
xhr.ontimeout = e => {
    console.log(e, 'cloudinary timeout');
};
// 4. create formData to upload
const formData = new FormData();

formData.append('file', {
    uri: 'some-file-path',          // this is the path to your file. see Expo ImagePicker or React Native ImagePicker
    type: '${type}/${fileEnding}',  // example: image/jpg
    name: 'upload.${fileEnding}'    // example: upload.jpg
});
// 6. upload the request
xhr.send(formData);
// 7. track upload progress
if (xhr.upload) {
    // track the upload progress
    xhr.upload.onprogress = ({ total, loaded }) => {
        const uploadProgress = (loaded / total);
        console.log(uploadProgress);
    };
}

2. загрузка нескольких файлов Предполагая, что у вас есть массив файлов, которые вы хотите загрузить, вы просто измените # 4 из кода выше, чтобы он выглядел так:

// 4. create formData to upload
const arrayOfFilesToUpload = [
    // ...
];
const formData = new FormData();

arrayOfFilesToUpload.forEach(file => {
    formData.append('file', {
        uri: file.uri,                  // this is the path to your file. see Expo ImagePicker or React Native ImagePicker
        type: '${type}/${fileEnding}',  // example: image/jpg
        name: 'upload.${fileEnding}'    // example: upload.jpg
    });
})

Ответ 7

Я изо всех сил пытался загрузить изображения недавно на реагировать родной. Я, кажется, не загружал изображения. Это на самом деле потому, что при отправке запросов я использовал проверку сети response-native-debugger и на. Сразу же я отключил проверку сети, запрос был выполнен успешно и файлы загружены.

Я использую пример из этого ответа выше, он работает для меня.

Эта статья на github об ограничениях функции проверки сети может многое прояснить для вас.