react-native图像上传时对文件大小进行限制_react-native-image-picker文件大小-CSDN博客

本文链接：https://blog.csdn.net/fcfc0724/article/details/79643682

在React Native应用中，使用react-native-image-picker组件处理图像上传时，遇到服务端返回413错误，原因是Nginx上传文件大小限制。为了解决此问题，可以在客户端对图像进行Base64转换并限制其大小。通过检验Base64字符串长度，可以实现客户端的文件大小检查，避免服务端调整配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native图像上传时将图像转成Base64并作大小限制后上传

背景

在做APP注册时，需要有选取图像并上传的步骤，于是便用到了react-native-image-picker,顺带一提的是它的Link很特殊，笔者是用的手动的方式才能使用的。
使用方式是ImagePicker.showImagePicker(options, callback)。
在使用是发现服务端返回了413，查了一下是nginx有上传文件大小限制。修改一下服务端设置就好了。
思前想后，觉得作为客户端，也应该对图像数据进行大小检验。

解析

我们使用react-native-image-picker是用的callback来对拿到的图像进行操作的。response对象的属性值在ReadMe中有提到。拿到response.data。
使用typeof(response.data)发现是String，输出发现是Base64的字符串，那就很好解决了。

ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {}
      else if (response.error) {}
      else if (response.customButton) {}
      else if (parseInt( response.data.length / 1048576 ) >= this.MaxSize) { //1048576 = 1024 * 1024
        this.alertMessage('提示:','图片太大，请选择一张更小的图')
      }
      else {
        //later
      }
    });