React Native中通过FormData上传图片前如何压缩至最小避免413错误？

我使用expo-image-picker库获取图片，代码如下：

let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Images,
                aspect: [3, 3],
                quality: 0,
                allowsMultipleSelection: false,
                allowsEditing: true,
});

我已将quality设为0，但通过POST请求上传至服务器时仍出现413错误，上传代码如下：

const register = async (data, image) => {
const bodyFormData = new FormData();
        bodyFormData.append('name', data.name);
        console.log(image);
        if (image) {
            const fileType = image.split('.').pop();
            const mimeType =
                fileType === 'png' || 'jpg' || 'jpeg' || 'PNG' || 'JPG' || 'JPEG';
            bodyFormData.append('avatar', {
                uri: image,
                name: `image.${fileType}`,
                type: mimeType,
            });
        }
        bodyFormData.append('email', data.email);
        bodyFormData.append('password', data.password);
        return await requester({
            requestFunc: () =>
                Request.Server.post(API_SERVER.REGISTER(), bodyFormData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                }),
        })();
    };

使用低分辨率图片上传可正常运行，我也了解过Expo ImageManipulator库，但它同样仅支持设置quality参数，对于超大图片这种方式并不理想，请问有没有其他限制图片大小的方法？

1. 限制图片像素尺寸（宽高） #

Expo ImageManipulator不仅支持调整quality，还能通过resize参数直接限制图片的最大宽/高，从根源上压缩体积。比如设置最大宽度为1000px，高度按比例自动缩放：

import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';

const resizeImage = async (imageUri) => {
  const MAX_WIDTH = 1000;
  const result = await manipulateAsync(
    imageUri,
    [{ resize: { width: MAX_WIDTH } }],
    { compress: 0.7, format: SaveFormat.JPEG }
  );
  return result.uri;
};

处理后的图片再上传，超大尺寸图的体积会大幅降低。

2. 强制转换图片格式 #

PNG格式的图片体积通常远大于JPEG，即使quality设为0，PNG的压缩空间也有限。可以强制将图片转为JPEG格式，配合resize和compress参数最大化压缩效果：
在ImageManipulator配置中指定format: SaveFormat.JPEG即可。

3. 修复上传代码的MIME类型错误 #

你当前的MIME类型赋值逻辑有误，代码会永远返回true，正确写法应该匹配对应MIME字符串：

const getMimeType = (fileType) => {
  const lowerType = fileType.toLowerCase();
  switch(lowerType) {
    case 'png':
      return 'image/png';
    case 'jpg':
    case 'jpeg':
      return 'image/jpeg';
    default:
      return 'image/jpeg';
  }
};

// 使用时：
const mimeType = getMimeType(fileType);

错误的MIME类型可能导致服务器处理异常，间接引发大小相关错误，修复后可避免这类问题。

4. 提前校验图片大小并提示用户 #

上传前先获取图片文件大小，超过阈值就提示用户更换，避免无效上传请求：

import * as FileSystem from 'expo-file-system';

const checkImageSize = async (imageUri, maxSizeInMB = 2) => {
  const fileInfo = await FileSystem.getInfoAsync(imageUri);
  const fileSizeInMB = fileInfo.size / (1024 * 1024);
  return fileSizeInMB <= maxSizeInMB;
};

// 使用时：
const isSizeValid = await checkImageSize(imageUri);
if (!isSizeValid) {
  alert('图片大小超过限制，请选择更小的图片');
  return;
}

内容的提问来源于stack exchange，提问作者Mai Đức Thắng