react native fs upload image

React Native是一个用于构建跨平台移动应用的JavaScript框架，它提供了一个名为 react-native-fs 的第三方库，可以方便地在应用中进行文件系统操作。同时，为了上传图片，我们需要使用React Native提供的另一个库 react-native-image-picker 。

下面是一个React Native上传图片的示例代码：

import React, { useState } from 'react';
import { Button, Image, View } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import RNFS from 'react-native-fs';
const App = () => {
  const [imageUri, setImageUri] = useState(null);
  const selectImage = () => {
    ImagePicker.showImagePicker({}, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else {
        setImageUri(response.uri);
  const uploadImage = async () => {
    const formData = new FormData();
    formData.append('image', {
      uri: imageUri,
      name: 'test.jpg',
      type: 'image/jpg',
    const url = 'http://example.com/upload';
    const headers = {
      'Content-Type': 'multipart/form-data',
    try {
      const response = await RNFS.fetch('POST', url, headers, formData);
      console.log(response);
    } catch (error) {
      console.log(error);
  return (
      <Button title="Select Image" onPress={selectImage} />
      {imageUri && (
          <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
          <Button title="Upload Image" onPress={uploadImage} />
    </View>
export default App;
在这个示例代码中，我们首先使用react-native-image-picker库来选择图片，然后将选择的图片URI保存在状态中。接着，当用户点击“上传图片”按钮时，我们将使用react-native-fs库将图片上传到服务器。
我们首先创建了一个FormData对象，将要上传的图片添加到其中，并将其作为参数传递给RNFS.fetch()函数。在这个函数中，我们使用POST方法向服务器发送请求，并在请求头中指定Content-Type为multipart/form-data，以便服务器能够正确处理请求。如果上传成功，则会在控制台中输出服务器响应。
请注意，这只是一个简单的示例，实际的图片上传可能需要更多的配置和错误处理。