基于React Native的高健壮性移动端文件共享方案问询

Great question—handling reliable file transfers in flaky mobile networks is a super common pain point for React Native apps, especially with 1-5MB files. Let’s break down a robust solution that eliminates redundant work on failures, covering both upload and download flows.

We’ll leverage battle-tested libraries and chunked transfer logic to handle network instability gracefully.

Upload: Chunked, Resumeable Uploads #

Instead of uploading the entire file at once, split it into smaller chunks (e.g., 512KB or 1MB) so only missing chunks need to be retransmitted on failure.

Tools to Use #

• Expo File System (if using Expo) or react-native-fs: Both offer solid file reading/writing capabilities for splitting files.
• react-native-hash: To generate MD5/SHA-1 hashes for chunk integrity checks.

Step-by-Step Workflow #

1. Preprocess the File

   • Split the target file into fixed-size chunks.
   • Generate a hash for each chunk and a total file hash (to verify final integrity).
   • Store chunk metadata (total chunks, chunk sizes, hashes) locally (e.g., AsyncStorage).

2. Initiate Upload Session

   • Send a POST request to your server with:
     • Filename, total file size, total chunks, chunk hashes, and total file hash.
   • The server responds with a list of chunks already received (if any) — this lets you skip redundant uploads.

3. Upload Missing Chunks

   • For each missing chunk, read the chunk data from the local file and send it to the server (use multipart/form-data or raw binary).
   • Mark chunks as completed locally as they succeed.
   • Add retry logic with exponential backoff (e.g., 1s → 2s → 4s) for failed chunk uploads.

4. Finalize Upload

   • Once all chunks are uploaded, send a "merge" request to the server.
   • The server combines all chunks into the full file, validates the total hash, and returns a download URL for other users.

Example Snippet (Expo File System) #

import * as FileSystem from 'expo-file-system';
import { generateHash } from 'react-native-hash';

// Split file into chunks
const splitFile = async (fileUri, chunkSize = 512 * 1024) => {
  const fileInfo = await FileSystem.getInfoAsync(fileUri);
  const totalChunks = Math.ceil(fileInfo.size / chunkSize);
  const chunks = [];

  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min((i + 1) * chunkSize, fileInfo.size);
    const chunkUri = `${FileSystem.cacheDirectory}chunk-${i}`;
    
    await FileSystem.copyAsync({
      from: fileUri,
      to: chunkUri,
      start,
      end
    });

    const chunkHash = await generateHash(chunkUri, 'md5');
    chunks.push({ index: i, uri: chunkUri, hash: chunkHash });
  }

  return { chunks, totalChunks, totalSize: fileInfo.size };
};

Download: Resumeable, Range-Based Downloads #

Use HTTP's Range header to request only the portion of the file you haven't downloaded yet, avoiding re-downloading completed parts.

Tools to Use #

• Expo File System or react-native-fs: Both support resumable downloads natively, but you can also implement custom range requests.
• @react-native-community/netinfo: To pause transfers when the network drops and resume when it's restored.

Step-by-Step Workflow #

1. Check Local Progress

   • Before starting a download, check if there's a partial file saved locally and read the downloaded byte count (store this in AsyncStorage).

2. Request Partial File

   • Send a GET request with the Range header: Range: bytes=${downloadedBytes}-
   • The server responds with the remaining bytes and sets the Content-Range header to confirm the range being sent.

3. Append to Local File

   • Write the new bytes to the end of the partial local file.
   • Update the downloaded byte count in AsyncStorage after each successful chunk.

4. Validate Completion

   • Once the download finishes, generate the local file's hash and compare it to the server-provided hash to ensure integrity.

The server needs to handle chunked uploads and range-based downloads. Below is a high-level logic that works with any backend stack (Node.js, Python, Java, etc.):

Chunked Upload Handling #

1. Session Initialization

   • Create a temporary directory for the file using the total file hash as a unique identifier.
   • Store metadata (filename, total chunks, chunk hashes) in a database or cache.

2. Chunk Reception

   • For each chunk upload, verify the chunk's hash matches the client-provided value.
   • Save the chunk to the temporary directory, named by its index.
   • Mark the chunk as completed in the metadata.

3. Merge & Cleanup

   • When receiving the merge request, check that all chunks are present.
   • Concatenate the chunks into the full file, validate the total hash.
   • Move the full file to a permanent storage location (e.g., local disk, object storage) and delete the temporary directory.
   • Return the download URL and file hash to the client.

Range-Based Download Handling #

1. Parse Range Header

   • Extract the start byte from the Range header (ignore end byte if not provided).
   • Validate the start byte is within the file's total size.

2. Send Partial Content

   • Read the requested range from the file.
   • Set response headers:
     • Content-Range: bytes ${start}-${end}/${totalSize}
     • Content-Length: ${end - start + 1}
     • Accept-Ranges: bytes
   • Send the partial file content to the client.

• Network State Monitoring: Use NetInfo to pause transfers when offline and resume automatically when connectivity returns.
• Retry Logic: Implement exponential backoff for failed chunk transfers to avoid overwhelming the server.
• Progress Tracking: Update the UI with upload/download progress (calculate percentage using completed chunks/total chunks).
• Expiry Cleanup: Automatically delete incomplete upload sessions (e.g., after 24 hours) to free up server storage.

内容的提问来源于stack exchange，提问作者vipes