React Native实现图片上传功能示例

本示例演示了如何利用React Native实现图片上传功能，用户可以从手机相册中选择图片并上传到服务器。具体实现方式是通过React Native组件库中的ImagePicker和Fetch API，实现图片选择和上传功能。

import React, { useState } from 'react';
import { View, Text, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import RNFetchBlob from 'rn-fetch-blob';

const options = {
  title: 'Select Image',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

const App = () => {
  const [imageUri, setImageUri] = useState('');

  const chooseImage = () => {
    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: 'data:image/jpeg;base64,' + response.data };
        setImageUri(source.uri);
        uploadImage(source.uri);
      }
    });
  };

  const uploadImage = (uri) => {
    RNFetchBlob.fetch('POST', 'https://example.com/upload/image', {
      'Content-Type': 'multipart/form-data',
    }, [
      { name: 'image', filename: 'image.jpg', type: 'image/jpeg', data: RNFetchBlob.wrap(uri) },
    ]).then((response) => {
      console.log(response);
    }).catch((error) => {
      console.log(error);
    });
  };

  return (
    <View>
      <Text>Select an Image to Upload:</Text>
      <Button title="Choose Image" onPress={chooseImage} />
      {imageUri ? <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} /> : null}
    </View>
  );
};

export default App;

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com