Question

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

您能否帮助我使用react-native上传图片？

Answer 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);

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-debugger 和 网络检查 。我立即关闭网络检查，请求成功并上传了文件。

我正在使用此answer above中的示例为我使用。

关于{strong>网络检查的局限性功能的article on github可能会为您带来帮助。

Answer 5

有几种可能的替代方案。首先，您可以使用XHR polyfill：

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

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

在this Github问题上对所有这些问题进行了进一步的讨论。

Answer 6

汤姆的回答对我不起作用。所以我实现了一个原生的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 7

仅以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 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 到视频或照片。

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

8 个答案: