如何在react native中将图像以分块格式上传到服务器

npm install react-native-image-picker axios

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import axios from 'axios';

const CHUNK_SIZE = 1024 * 1024; // 1MB

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

  const chooseImage = () => {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
    };
    ImagePicker.showImagePicker(options, (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 () => {
    if (!imageUri) return;

    const formData = new FormData();
    const image = await fetch(imageUri);
    const imageBlob = await image.blob();
    const totalChunks = Math.ceil(imageBlob.size / CHUNK_SIZE);

    for (let i = 0; i < totalChunks; i++) {
      const start = i * CHUNK_SIZE;
      const end = Math.min(start + CHUNK_SIZE, imageBlob.size);
      const chunk = imageBlob.slice(start, end);

      formData.append('file', chunk, `chunk-${i}`);
      formData.append('chunkIndex', i);
      formData.append('totalChunks', totalChunks);

      try {
        await axios.post('https://your-server-url/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
      } catch (error) {
        console.error('Upload error:', error);
        return;
      }
    }

    Alert.alert('Success', 'Image uploaded successfully!');
  };

  return (
    <View>
      <Button title="Choose Image" onPress={chooseImage} />
      <Button title="Upload Image" onPress={uploadImage} />
    </View>
  );
};

export default App;