React Native在移动端APP上实现拍照与照片上传功能

一、react-native-image-crop-picker官方链接

二、简述react-native-image-crop-picker 的常用API即属性

//调用系统相册选择图片
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);
});

三、附上项目截图：支持拍照和上传图片

四、项目部分代码片段

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:810console.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 eqeqeqif (uploadresult && uploadresult.status == 200) {// 从服务端获取上传图片地址const imgurl = await generateUrls({ resId: resId });// eslint-disable-next-line eqeqeqif (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.urlpreviewImageList: [...lists1, localFilePath], //previewImageList:预览图片集合，预览图片是本地的});}}}}

React Native在移动端APP上实现拍照与照片上传功能相关推荐

技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
基于 React Native 的 58 同城 App 开发实践
作者简介: 彭飞,58 同城 iOS 客户端架构师.专注于新技术的研发,主要负责 App 端组件化架构以及性能优化,并已推广 React Native 在 58 同城 App 中业务场景的应用.在 M ...
如何用 React Native 创建一个iOS APP？（二）
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
react native开发Android 篇——APP名称、图标、启动页
react native开发Android 篇--APP名称.图标.启动页设置APP名称设置APP图标设置启动页隐藏启动页设置APP名称编辑 android/app/src/main/re ...
React Native (一) react-native-video实现音乐播放器和进度条的功能
React Native (一) react-native-video实现音乐播放器和进度条的功能功能: 1.卡片滑动切歌 2.显示进度条效果图: 第三方组件: 1.react-native-vi ...
React Native使用指南-在设备上运行
注意在iOS设备上运行React Native应用需要一个Apple Developer account并且把你的设备注册为测试设备.本向导只包含React Native相关的主题. 译注:从XCod ...
React Native制作仿美团APP总结
最近学习了一个网上的React Native项目,利用React Native制作一个类似于美团的App,项目属于对之前React Native常用组件的基本使用,但是仍有一些关键点值得记录.最后做成 ...
react native学习笔记13——FlatList上拉加载
我们可以利用官方组件RefreshControl实现下拉刷新功能,但React Native官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点. 虽然没有直接提供上拉加载的 ...
【前端-React Native】移动端原生开发整合React Native Elements教程-安卓示例
目录一.移动开发和web开发的区别二.什么是React Native? 三.如何实现安卓和IOS用一套代码开发四.React Native开发实战 1. 安装Android studio 2. ...

React Native在移动端APP上实现拍照与照片上传功能

React Native在移动端APP上实现拍照与照片上传功能相关推荐

最新文章

热门文章