react-native實現多張圖片上傳
阿新 • • 發佈:2018-12-14
最近在搞這個圖片上傳功能,,剛開始的時候iOS用的是 react-native-image-crop-picker這個外掛,,iOS那邊完美執行沒有毛病,,,但是到android這邊之後就開始報各種資源找不到的錯誤。。畢竟不是自己的框架,,很多地方都不敢改動,,後來經過各方面查詢,,大概的原因有幾種。。。版本不一樣,,我的框架用的是sdk26的。。但是外掛支援的是sdk27…我的版本太低了,,所以裡面的資源找不到 後來從網上找到了另外一個外掛react-native-syan-image-picker 這個外掛
/** * 開啟相機支援裁剪引數 * @param options * @param callback */ openCamera(options, callback) { const optionObj = { ...defaultOptions, ...options }; RNSyanImagePicker.openCamera(optionObj, callback) },
/** * 以Callback形式呼叫 * 1、相簿引數暫時只支援預設引數中羅列的屬性; * 2、回撥形式:showImagePicker(options, (err, selectedPhotos) => {}) * 1)選擇圖片成功,err為null,selectedPhotos為選中的圖片陣列 * 2)取消時,err返回"取消",selectedPhotos將為undefined * 按需判斷各引數值,確保呼叫正常,示例使用方式: * showImagePicker(options, (err, selectedPhotos) => { * if (err) { * // 取消選擇 * return; * } * // 選擇成功 * }) * * @param {Object} options 相簿引數 * @param {Function} callback 成功,或失敗回撥 */ showImagePicker(options, callback) { const optionObj = { ...defaultOptions, ...options }; RNSyanImagePicker.showImagePicker(optionObj, callback) },
/** * 以Promise形式呼叫 * 1、相簿引數暫時只支援預設引數中羅列的屬性; * 2、使用方式 * 1)async/await * handleSelectPhoto = async () => { * try { * const photos = await SYImagePicker.asyncShowImagePicker(options); * // 選擇成功 * } catch (err) { * // 取消選擇,err.message為"取消" * } * } * 2)promise.then形式 * handleSelectPhoto = () => { * SYImagePicker.asyncShowImagePicker(options) * .then(photos => { * // 選擇成功 * }) * .catch(err => { * // 取消選擇,err.message為"取消" * }) * } * @param {Object} options 相簿引數 * @return {Promise} 返回一個Promise物件 */ asyncShowImagePicker(options) { const optionObj = { ...defaultOptions, ...options, }; return RNSyanImagePicker.asyncShowImagePicker(optionObj); },
/**
* 清除快取
*/
deleteCache() {
RNSyanImagePicker.deleteCache()
},
/**
* 移除選中的圖片
* @param {Number} index 要移除的圖片下標
*/
removePhotoAtIndex(index) {
RNSyanImagePicker.removePhotoAtIndex(index)
},
/**
* 移除所有選中圖片
*/
removeAllPhoto() {
RNSyanImagePicker.removeAllPhoto()
}
這些都是這個外掛所支援的方法
const defaultOptions = {
imageCount: 6, // 最大選擇圖片數目,預設6
isRecordSelected: false, // 是否已選圖片
isCamera: true, // 是否允許使用者在內部拍照,預設true
isCrop: false, // 是否允許裁剪,預設false, imageCount 為1才生效
CropW: ~~(width * 0.6), // 裁剪寬度,預設螢幕寬度60%
CropH: ~~(width * 0.6), // 裁剪高度,預設螢幕寬度60%
isGif: false, // 是否允許選擇GIF,預設false,暫無回撥GIF資料
showCropCircle: false, // 是否顯示圓形裁剪區域,預設false
circleCropRadius: width/2, // 圓形裁剪半徑,預設螢幕寬度一半
showCropFrame: true, // 是否顯示裁剪區域,預設true
showCropGrid: false, // 是否隱藏裁剪區域網格,預設false
quality: 90, // 壓縮質量
enableBase64: false, // 是否返回base64編碼,預設不返回
};
這些是這個外掛的屬性 用了之後覺得還是挺好用的只不多需要配置東西,,具體的可以去GitHub上面去搜,,,挺詳細的額