react-native上傳圖片、視訊
阿新 • • 發佈：2020-07-21
1.上傳視訊：
使用外掛 ：react-native-image-picker
import*asImagePickerfrom'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 |
const options = {/*配置參考上表*/}
SyanImagePicker .asyncShowImagePicker(options) .then(photos => { // 選擇成功 console.log('當前選擇的圖片', photos); }) .catch(err => { // 取消選擇，err.message為"取消" })