iOS - Image files included in outbound network requests are significantly larger than the original files

Description

When creating a multipart/form-data request with a FormData object whose parts contain a uri property pointing to an image file, the resulting network request is much (~3-4 times) larger than the original image file.

This issue only occurs on iOS. This is a duplicate of #27099, which has been closed but is not fixed.

Version

0.67.3

Output of npx react-native info

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 973.39 MB / 32.00 GB
    Shell: 3.3.1 - /usr/local/bin/fish
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.8.0 - /usr/local/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0
      System Images: android-23 | Google APIs Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.3 => 0.67.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Obtain a URI to any on-disk image, call it fileUri.
Create a FormData object with the file uri:

const formData = new FormData();
formData.append('file', { type: 'application/octet-stream', name: 'image.jpeg', uri: fileUri });

Then, make a request with that form data:

const response = await fetch('https://postman-echo.com/post', { method: 'POST', body: formData })

Observe the content-length of the request headers if you control the server, or in this example, observe the response body from postman-echo.

Snack, code example, screenshot, or link to a repository

Snack demonstrating issue (and current workaround): https://snack.expo.dev/@httpriestess/image-upload-size-repro

It posts an image file to postman-echo, and then displays the content-length header that postman-echo returns.

Bắt đầu với bản tái hiện Snack được liên kết và phần triển khai iOS cho việc xử lý fetch/FormData; so sánh độ dài nội dung của yêu cầu multipart với hình ảnh gốc. Hoàn thành khi một yêu cầu iOS được tạo từ URI không còn làm phình dữ liệu hình ảnh và bản tái hiện được cung cấp vẫn tải lên thành công.