React Native realizes the function of taking pictures and uploading photos on the mobile APP

1. The official link of react-native-image-crop-picker

2. Briefly describe the commonly used APIs of react-native-image-crop-picker, namely attributes

//调用系统相册选择图片
ImagePicker.openPicker({
  width: 300, //设定上传图片的宽度（一般在移动端除非产品设计了图片必须什么宽高，否则会经常不兼容）
  height: 400, //设定上传图片的高度
  cropping: true, //是否可以剪切
  multiple: true, //是否支持多选
  cropperChooseText: '确定', //右下角选中按钮可以用中文描述
  cropperCancelText: '取消', //右下角取消按钮可以用中文描述
  compressImageQuality: 0.2,//压缩图像的质量(从0到1,1是最好的质量)。在iOS上，大于0.8的值不会在大多数图像中产生明显的质量提升，而0.8的值会比1的值减少一半或更少的文件大小
 includeBase64: true,// 当设置为true时，图像文件内容将作为base64编码的字符串在data属性中可用。提示:要使用这个字符串作为图像源
}).then(image => {
  console.log(image);
});

  //调用相机拍照
ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true,
}).then(image => {
  console.log(image);
});

3. Attach screenshots of the project: support for taking pictures and uploading pictures

4. Some code snippets of the project

import ImagePicker from 'react-native-image-crop-picker';
// 调用系统相册选择图片
     openImagePicker = async () => {
       const { imgList } = this.state;
       if (imgList.length && imgList.length >= 60) {
         return Toast.info('最多上传60张图片！');
       }
       const uploadresult = await ImagePicker.openPicker({
         cropperChooseText: '确定',
         cropperCancelText: '取消',
         multiple: true,           //可多选
         cropping: false,          //不可剪切
         //  includeBase64: true,
         compressImageQuality: 0.2,   //照片压缩比例：0.2
       });
      
       //上传本地图片多张后，进行遍历
       uploadresult.forEach(async ii => {
         //ii.size / (1024 * 1024) + 'MB' 每张照片尺寸为多少MB
         //ii.width 每张图片的宽度
         //ii.height 每张图片的高度
         //ii.modificationDate 每张图片的日期，例： 1611400769000，时间戳毫秒转换成 2021-01-23 19:19:29  官方链接：https://tool.lu/timestamp/
         //例： size：0.03307628631591797MB ,width:1440 ,height:810
         console.log(ii.size / (1024 * 1024) + 'MB',',width:' + ii.width,',height:' + ii.height);
         //${Math.round(Math.random() * 1000000000000)} 拼接随机序列，保证每张图片的唯一性
         const fileName = `${ii.modificationDate}${Math.round(Math.random() * 1000000000000)}`;
         console.log(ii.modificationDate);
         this.uploadImage2Oss(fileName,ii.path);
       });
     }

    //调用相机拍照
    openCamera = async () => {
      const cameraImage = await ImagePicker.openCamera({
        cropperChooseText: '确定',
        cropperCancelText: '取消',
        cropping: false,
        multiple: true,
        // includeBase64: true,
        compressImageQuality: 0.2,
      });
      console.log(cameraImage.size / (1024 * 1024) + 'MB',',width:' + cameraImage.width,',height:' + cameraImage.height);
      const fileName = `${cameraImage.modificationDate}${Math.round(Math.random() * 1000000000000)}`;
      console.log(fileName);
      this.uploadImage2Oss(fileName,cameraImage.path);
    }

    // 上传图片到oss 客户端直传模式
    uploadImage2Oss= async (fileName,localFilePath) => {
      const restoken = await ResourceTokenServicegetToken({
        fileName: fileName,
      });
      const { codeInfo, uploadToken = {} } = restoken;
      if (codeInfo && codeInfo.code === 0) {
        const { resId, endpoint, params } = uploadToken;
        console.log('resId',resId);
        console.log('endpoint',endpoint);
        console.log('params',params);
        const pat = JSON.parse(params);
        const data = new FormData(); //创建一个formData对象实例的方式,通过append方法添加数据
        for (const i in pat) {
          data.append(`${i}`, pat[i]);
        }
        data.append('resId', resId);
        const file = {
          uri: localFilePath,resId,...pat, type: 'multipart/form-data', name: fileName,
        };
        data.append('file', file);
        const uploadresult = await fetch(endpoint,{
          method: 'POST',
          body: data,
        });
        // eslint-disable-next-line eqeqeq
        if (uploadresult && uploadresult.status == 200) {
          // 从服务端获取上传图片地址
          const imgurl = await generateUrls({ resId: resId });
          // eslint-disable-next-line eqeqeq
          if (imgurl && imgurl.codeInfo.code == 0) {

            const { imgList, previewImageList } = this.state;
            const lists = imgList;
            const lists1 = previewImageList;
            this.setState({
              imgList: [...lists, imgurl.url],  //imgList:图片集合，远程cdn 地址,添加最新上传的imgurl.url
              previewImageList: [...lists1, localFilePath], //previewImageList:预览图片集合，预览图片是本地的
            });
          }
        }
      }
    }