react-native上传图片、视频
1.上传视频:
使用插件 :react-native-image-picker
import * as ImagePicker from 'react-native-image-picker'
const options = { title: '选择视频', cancelButtonTitle: '取消', takePhotoButtonTitle: '录制视频', chooseFromLibraryButtonTitle: '选择视频', mediaType: 'video', videoQuality: 'medium' // 视频质量 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android };
ImagePicker.showImagePicker(options, (response) => {})
2.上传图片:
使用插件 :react-native-syan-image-picker
组件调用时,支持传入一个 options
对象,可设置的属性如下:
属性名 | 类型 | 是否可选 | 默认值 | 描述 |
---|---|---|---|---|
imageCount | int | 是 | 6 | 最大选择图片数目 |
isRecordSelected | bool | 是 | false | 记录当前已选中的图片 |
isCamera | bool | 是 | true | 是否允许用户在内部拍照 |
isCrop | bool | 是 | false | 是否允许裁剪,imageCount 为1才生效 |
CropW | int | 是 | screenW * 0.6 | 裁剪宽度,默认屏幕宽度60% |
CropH | int | 是 | screenW * 0.6 | 裁剪高度,默认屏幕宽度60% |
isGif | bool | 是 | false | 是否允许选择GIF,暂无回调GIF数据 |
showCropCircle | bool | 是 | false | 是否显示圆形裁剪区域 |
circleCropRadius | float | 是 | screenW * 0.5 | 圆形裁剪半径,默认屏幕宽度一半 |
showCropFrame | bool | 是 | true | 是否显示裁剪区域 |
showCropGrid | bool | 是 | false | 是否隐藏裁剪区域网格 |
quality | int | 是 | 90 | 压缩质量(安卓无效,固定鲁班压缩) |
minimumCompressSize | int | 是 | 100 | 小于100kb的图片不压缩(Android) |
enableBase64 | bool | 是 | false | 是否返回base64编码,默认不返回 |
freeStyleCropEnabled | bool | 是 | false | 裁剪框是否可拖拽(Android) |
rotateEnabled | bool | 是 | true | 裁剪是否可旋转图片(Android) |
scaleEnabled | bool | 是 | true | 裁剪是否可放大缩小图片(Andro |
import SyanImagePicker from 'react-native-syan-image-picker';
const options = {/*配置参考上表*/}
SyanImagePicker .asyncShowImagePicker(options) .then(photos => { // 选择成功 console.log('当前选择的图片', photos); }) .catch(err => { // 取消选择,err.message为"取消" })