从 React Native 退出上传照片时出现未处理的错误

Question

这是我的组件，用于从用户手机中选择和上传照片。它工作正常，预计当用户打开手机照片库但随后决定取消并且不选择任何要上传的照片时，我会收到如下错误：

" YellowBox.js:82 可能的未处理承诺拒绝 (id: 0): 错误：用户取消了图像选择“

我不知道在哪里以及如何捕获和处理错误，有什么帮助吗？

class ProfilePictureHandeler extends Component {
constructor (props) {
super(props)
this.state = {
  loading: false,
  dp: null
 }
}

openPicker () {
this.setState({ loading: true })
const Blob = RNFetchBlob.polyfill.Blob
const fs = RNFetchBlob.fs
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob

const { currentUser } = firebase.auth()

ImagePicker.openPicker({
  cropping: true,
  height: 265,
  width: 265,
  mediaType: 'photo'
}).then(image => {
  const imagePath = image.path

  let uploadBlob = null

  const imageRef = firebase.storage().ref(`/users/${currentUser.uid}/profile`).child('dp.jpg')

  let mime = 'image/jpg'
  fs.readFile(imagePath, 'base64')
        .then((data) => {
          return Blob.build(data, { type: `${mime};BASE64` })
        })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
       .then(() => {
         uploadBlob.close()
         return imageRef.getDownloadURL()
       })
       .then((url) => {
         firebase.database().ref(`/users/${currentUser.uid}/profile`).update({
           profile_picture: url
         })
         let obj = {}
         obj['loading'] = false
         obj['dp'] = url
         this.setState(obj)
       })
       .catch((error) => {
         console.log(error + 'OPEN PICKER AGAIN')
       })
       .catch((error) => {
         console.log(error)
       })
       .catch((error) => {
         console.log(error)
       })
})
 }

render () {
const selectedPicture = this.state.dp ? (<TouchableOpacity onPress={() => this.openPicker()}>
  <Avatar
    height={265}
    rounded
    source={{ uri: this.state.dp }}
    activeOpacity={0.7}
    />
  </TouchableOpacity>) : (

  <TouchableHighlight onPress={() => this.openPicker()} >

    <Avatar
      rounded
      height={265}
      source={require('../../src/assets/man.png')}
      activeOpacity={0.7}
 />
  </TouchableHighlight>

 )
    // Default picture, d
const standardPicture = this.state.loading ? <ActivityIndicator animating={this.state.loading} /> : (
  <View>
    {selectedPicture}
  </View>
)

return (
  <TouchableHighlight onPress={() => this.openPicker()} >
    <View>
      {standardPicture}
    </View>
  </TouchableHighlight>

 )
 }
}

export default ProfilePictureHandeler

Answer 1

ImagePicker.openPicker({
  cropping: true,
  height: 265,
  width: 265,
  mediaType: 'photo'
}).then(image => {
  const imagePath = image.path

  let uploadBlob = null

  const imageRef = firebase.storage().ref(`/users/${currentUser.uid}/profile`).child('dp.jpg')

  let mime = 'image/jpg'
  fs.readFile(imagePath, 'base64')
        .then((data) => {
          return Blob.build(data, { type: `${mime};BASE64` })
        })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
       .then(() => {
         uploadBlob.close()
         return imageRef.getDownloadURL()
       })
       .then((url) => {
         firebase.database().ref(`/users/${currentUser.uid}/profile`).update({
           profile_picture: url
         })
         let obj = {}
         obj['loading'] = false
         obj['dp'] = url
         this.setState(obj)
       })
       .catch((error) => {
         console.log(error + 'OPEN PICKER AGAIN')
       })
       .catch((error) => {
         console.log(error)
       })
       .catch((error) => {
         console.log(error)
       })
}).catch((callBack)=>{ // you forgot to add catch to this promise.
   console.log(callBack); // Please handle the callBack here.
  });
 }

Answer 2

这是一个对我有用的修复：

ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    })
.then(image => {
    /*
image = {
    "cropRect": { "height": zzz, "width": sss, "x": aaa, "y": qqq },
    "height": xxx,
    "mime": "image/jpeg",
    "modificationDate": "1611843171000",
    "path": "file:///storage/emulated/0/Android/data/.../.....jpg",
    "size": 59579,
    "width": yyy
}
    */
})
.catch(error => {
    if (error.code === 'E_PICKER_CANCELLED') { // here the solution
      return false;
    }
});

Answer 3

如果用户取消选择图像，ImagePicker.openPicker() 将抛出错误。

尝试将catch 添加到您的代码中，如下所示：

ImagePicker.openPicker(options)
.then(image => {
    // do your stuff
})
.catch(error => {
    // add this to your code
});