如何使用 react-native 将文件上传到服务器

Question

我正在开发一个需要将图像上传到服务器的应用程序。根据图像，我得到一个需要渲染的响应？

你能帮我如何使用 react-native 上传图片吗？

Answer 1

React Native 内置了文件上传功能。

Example 来自 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);

Answer 2

我的解决方案是使用 fetch API 和 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
})

Answer 3

我写了类似的东西。查看https://github.com/kamilkp/react-native-file-transfer

Answer 4

我最近一直在努力在 react-native 上上传图片。我好像没有上传图片。这实际上是因为我在发送请求时使用了 react-native-debugger 和 network inspect on。我立即关闭网络检查，请求成功并上传文件。

我正在使用来自 answer above 的示例，它对我有用。

article on githubarticle on github关于网络检查的限制功能可能会为您解决问题。

Answer 5

只是在answer by Dev1 的基础上构建，如果您还想显示上传进度，这是从 React Native 上传文件的好方法。它是纯 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
    });
})

Answer 6

有几个潜在的替代方案可供选择。首先，您可以使用 XHR polyfill：

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

其次，问一个问题：我如何在 Obj-C 中上传文件？回答这个问题，然后你就可以实现一个 native module 来从 JavaScript 调用它。

在this Github 问题上有一些关于所有这些的进一步讨论。

Answer 7

汤姆的回答对我不起作用。所以我实现了一个原生 FilePickerModule，它可以帮助我选择文件，然后使用 remobile 的 react-native-file-transfer 包来上传它。 FilePickerModule 返回所选文件的路径（FileURL），react-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);
     })

Answer 8

上传文件：使用 expo-image-picker npm 模块。在这里，我们可以上传任何文件或图像等。可以使用 launchImageLibrary 方法访问设备中的文件。然后访问该设备上的媒体。

import * as ImagePicker from "expo-image-picker";

const loadFile = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    aspect: [4, 3],
  });
  return <Button title="Pick an image from camera roll" onPress={loadFile} />
}

上述代码用于访问设备上的文件。

另外，使用相机捕捉图像/视频以通过使用上传 launchCameraAsync 和 mediaTypeOptions 到视频或照片。