1. 程式人生 > >react-native實現多張圖片上傳

react-native實現多張圖片上傳

最近在搞這個圖片上傳功能,,剛開始的時候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上面去搜,,,挺詳細的額