react-native 文件上传

作为react-native 的初级小白，项目中遇到文件上传的问题，遇到了一些坑点，记录如下：

• 第三方库的选择
  react-native-image-crop-picker 可以支持拍照，从相册中进行选择照片和对照片的裁剪。
  坑点：
  1. iOS打开手机的相册，需要用setTimeout 做延时处理，不然会出现 手机 相册弹出后又立刻关闭，再次点开相册 会死机的情况。

setTimeout(() => {
      ImagePicker.openPicker({
        cropping: cropit,
        cropperCircleOverlay: circular,
        includeExif: true,
      }).then(image => {
        this.formatUploadData(image);
      });
    }, 1000);

2. 压缩的问题，压缩不能使体积压缩到某个固定值之下。因为需要的参数中，只能填入了压缩的质量。例如：当图片的体积小于1M的时候，本来不需要压缩的图片，必要要压缩。当体积为几十M 的时候，即使压缩也会大于1M。所以 对于 体积的压缩是无法控制的，这个问题还没有解决。

3. 压缩后图片的质量下降，预览图片的时候图片的质量严重受到 影响。

• 文件的上传
  react-native中对于文件的类型的上传，解决方法：用form data.

const formData = new FormData();
const file = {
      uri: image.path,
      type: image.mime,
      name:image.name,
      size: image.size,
 };
formData.append('file', file);
// 调用文件上传的方法

FormData()是js 中的方法，不用引入可以直接用，如果使用的时候代码中报错，那么可能是eslint 的问题哦！

• 预览图片
  图片预览的时候，需要从后端拉取图片。后端小伙伴给的接口中，在浏览器中测试API，发现 调用API 后直接就从浏览器上download 下来了图片。但在项目中 使用 Axios库，请求 会获取200成功，但拿不到图片的资源。
  解决办法：
  1. 网上使用了一种方法： rn-fetch-blob，可以获取图片，但是我没有采用，因为该库使用了fetch 发请求，如果我们使用 fetch 的话，则需要获取 登录的token ,而登录是一套及其复杂的逻辑，这里不方便使用。
  2. 我们采用了另一种方法，让后端修改了接口，返回了图片的base 64 码，而 react-native 中的Image 方法可以接受将base 64 的码转化为图片，所以解决了问题。
• 图片缓存
  图片缓存使用库react-native-fs,将图片存入文件中，放入App 的缓存目录下RNFS.CachesDirectoryPath, 预览图片的时候 先判断路径是否存在，如果存在，则直接读取，如果不存在，先 download 图片，然后存入文件中。App 清理缓存的时候，则可以直接 清楚 cache 目录下的文件即可。