如何在使用expo-image-picker时添加图像类型和大小限制（就像我只能选择jpeg类型图像和最大内存2000kB）

Question

我在我的一个 React Native 项目中使用图像选择器。现在我需要在从图库中选择图像或使用相机捕获图像时添加一些限制。

我只想选择jpeg类型的图像，并且它们的内存必须小于2000kB。

可以使用expo-image-picker吗？预先感谢。

Answer 1

// Install this npm
import * as FileSystem from 'expo-file-system'
import * as ImagePicker from 'expo-image-picker'

export const getFileInfo = async (fileURI: string) => {
   const fileInfo = await FileSystem.getInfoAsync(fileURI)
   return fileInfo
}

export const isLessThanTheMB = (fileSize: number, smallerThanSizeMB: number) => {
   const isOk = fileSize / 1024 / 1024 < smallerThanSizeMB
   return isOk
}


const handleUploadPhoto = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        quality: 1,
      })

      if (result.cancelled) return

      const { uri, type } = result
      const fileInfo = await getFileInfo(result.uri)

      if (!fileInfo?.size) {
        alert("Can't select this file as the size is unknown.")
        return
      }

      if (type === 'image') {
        const isLt15MB = isLessThanTheMB(fileInfo.size, 15)
        if (!isLt15MB) {
          alert(`Image size must be smaller than 15MB!`)
          return
        }
      }

      if (type === 'video') {
        const isLt500MB = isLessThanTheMB(fileInfo.size, 500)
        if (!isLt500MB) {
          alert(`Video size must be smaller than 500MB!`)
          return
        }
      }

      // Save or process with the result.uri
    } catch (error) {
      console.info(error)
    }
 }

Answer 2

你可以使用这样的东西。

 const checkFileSize = async (fileURI: string) => {
        const fileSizeInBytes = await FileSystem.getInfoAsync(fileURI);
        return fileSizeInBytes;
    };

然后调用它：

   const pickImage = async (
        cb: Dispatch<React.SetStateAction<string>>,
        cbv: Dispatch<React.SetStateAction<boolean>>
    ) => {
        try {
            const result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Images,
                quality: 1,
            });

            if (!result.cancelled) {
                const fileSize = await checkFileSize(result.uri);
                if (fileSize.size && fileSize.size < 2000000) {
                    cb(result.uri);
                    cbv(true);
                } else {
                    throw new Error();
                }
            }
        } catch (err) {
            Alert.alert(
                i18n.t('failure'),
                i18n.t('imageSizeTooBig'),
                [{ text: 'OK' }],
                { cancelable: false }
            );
        }
    };

Answer 3

这不是对您问题的直接答案，但我认为解决同一问题的更好/替代方法。 大多数时候，搜索这个问题的人实际上并不想阻止用户选择图像，他们只是想确保不会上传太大的图像等。这是一种更简洁、更用户友好的方法，使用博览会图像操纵器：

 const resizeImage = async (uri: string) => {
if (!uri) return "";
const manipResult = await ImageManipulator.manipulateAsync(
  uri,
  [{ resize: { width: 1024 } }],
  { compress: 0.5, format: ImageManipulator.SaveFormat.JPEG }
);
return manipResult.uri;

};

将 asset.uri 传递给它，它将返回宽度为 1024px 并压缩为 JPEG 的相同图像，用户不必一直打开选择器并猜测它是否符合标准。