React Native中如何创建文件构造器？需向端点发送File Object类型

Hey there! I totally get how annoying this can be—React Native doesn’t come with the browser’s native File object, which throws a wrench in things when your API expects that exact type. Let’s break down a few practical solutions to fix this:

Most backend APIs don’t strictly check for a native File instance—they just care about core properties like name, type, and a way to access the file content. You can create a custom class that mirrors the File interface to satisfy these requirements:

class RNFile {
  constructor(uri, name, type) {
    this.uri = uri; // Local file URI from React Native's file system
    this.name = name; // e.g., "vacation-photo.jpg"
    this.type = type; // MIME type, e.g., "image/jpeg"
    
    // Optional: Add a method to convert the URI to a Blob if your API needs it
    this.getBlob = async () => {
      const response = await fetch(this.uri);
      return response.blob();
    };
  }
}

// How to use it:
const myUploadFile = new RNFile(
  'file:///storage/emulated/0/Downloads/my-document.pdf',
  'project-report.pdf',
  'application/pdf'
);

This works for most cases because APIs will look for those key properties instead of checking the object’s exact type.

If your API specifically expects a Blob-based File, you can convert the local URI to a Blob first, then attach the required File metadata:

async function createFileFromUri(uri, fileName, mimeType) {
  const response = await fetch(uri);
  const blob = await response.blob();
  
  // Merge Blob with File-like properties
  return Object.assign(blob, {
    name: fileName,
    lastModified: Date.now()
  });
}

// Usage example:
const uploadFile = await createFileFromUri(
  'file:///path/to/your/image.png',
  'profile-avatar.png',
  'image/png'
);

This gives you a Blob with all the extra metadata a typical File object has, making it compatible with stricter API checks.

If you’re sending files via FormData (the standard for uploads), React Native’s built-in FormData accepts objects with uri, name, and type directly—no need for a full File object at all:

const formData = new FormData();
formData.append('user-upload', {
  uri: 'file:///path/to/your/video.mp4',
  name: 'summer-vlog.mp4',
  type: 'video/mp4'
});

// Send it with fetch or axios:
fetch('https://your-api-endpoint.com/upload', {
  method: 'POST',
  body: formData,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => response.json())
.catch(err => console.error('Upload failed:', err));

This is the most straightforward approach for uploads, since React Native’s FormData is explicitly designed to handle these objects.

If you’re working with a library or API that strictly checks for instanceof File, you can use a package like rn-fetch-blob to create a more authentic File-like object. Here’s a quick example:

import RNFetchBlob from 'rn-fetch-blob';

async function createRNFile(uri, fileName, mimeType) {
  const wrappedBlob = await RNFetchBlob.wrap(uri);
  return Object.assign(wrappedBlob, {
    name: fileName,
    type: mimeType
  });
}

Just remember to install and link the library first (follow their official docs for React Native version compatibility).

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