首页 > 解决方案 > 用户选择一张后,使用 fetch API 上传图片

问题描述

用户从图库中选择首选照片后,我需要将图像作为个人资料照片上传到服务器。我将在这里解释这个场景:第一个用户选择首选照片,我需要调用一个 API 来发送用户 ID,它会返回给我另一个照片 ID,之后我需要调用媒体上传 API 并发送用户 ID,选中照片,文件夹名称,即用户和文件扩展名。这是我如何实现的:

  const userData = useSelector(state => state.user.userData)

//alow for access to the gallery
  const allowAccess = async () => { 
    if (Platform.OS !== 'web') {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      } else {
        pickImage()
          .then((imageUri) => {
            getUploadId(userData.id)
              .then(
                uploadMedia(userData.id, imageUri)
              )
          })
      }
    }
  }

  const getUploadId = (userId) => {
    return axios
      .post('**api_url**', {
        "id": userId
      })
      .then(response => {
        // response.data is the products
        const uploadId = response.data
        console.log('this is upload id', uploadId)
        return uploadId
      })
      .catch(error => {
        // error.message is the error message
        console.log(error.message)
      })
  }

  const uploadMedia = (userId, imageFile) => {
    return axios
      .post('**api_url**'
        , {
          "fileName": userId,
          "FormFile": imageFile,
          "FolderName": "Users",
          "FileExtension": '.jpg'
        })
      .then(response => {
        const res = response.data
      })
      .catch(error => {
        // error.message is the error message
        console.log(error.message)
      })
  }

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    const imageUri = result.uri
    return imageUri
  };

媒体上传给我的状态码是500,我该如何处理?任何帮助,将不胜感激。

标签: reactjsreact-nativefetch-api

解决方案


推荐阅读