React native 如何使用react native将文件上载到服务器

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

---

您能帮助我如何使用react native上传图像吗？

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

第二，问一个问题：我如何上传Obj-C中的文件？回答这个问题，然后就可以实现一个从JavaScript调用它的方法

---

关于这个问题，还有一些进一步的讨论。

我写了一些类似的东西。签出

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

---

汤姆的回答对我不起作用。因此，我实现了一个原生FilePickerModule，它帮助我选择文件，然后使用remobile的react原生文件传输包上传它。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);
     })

---

我的解决方案是使用fetchapi和FormData

在Android上测试。

这是一种从react native上传文件的好方法，如果您还想显示上传进度的话。它是纯JS的，因此实际上可以在任何Javascript文件上使用

（请注意，在步骤4中，您必须用类型和文件结尾替换字符串中的变量。也就是说，您可以将这些字段去掉。）

以下是我在Github上提出的要点：

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

---

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

我正在使用这个例子，它对我很有用

---

这篇关于网络检查功能的限制的文章可能会为您澄清一些问题。

上传文件：使用expo image pickernpm模块。在这里，我们可以上传任何文件或图像等。可以使用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} />
}

import*作为“世博会图像采集器”中的图像采集器；
const loadFile=async（）=>{
让结果=等待ImagePicker.launchImageLibraryAsync({
mediaTypes:ImagePicker.MediaTypeOptions.All，
相位：[4,3]，
});
返回
}

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

此外，使用摄像头捕获图像/视频，然后使用

---

使用mediaTypeOptions启动CameraAsync到视频或照片。

我正在使用axios做类似的事情。服务器获取的是元数据，而不是实际文件。“uriFromCameraRoll”实际上是如何将其转换为文件作为

发送的一部分的？
xhr
不是react原生api的一部分，这给了我一个
xhr未定义的问题
error@JulianKtry:var xhr=newXMLHttpRequest（）；获取中没有任何进展：(
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} />
}