Question

我是React native和expo的新手，我正在尝试处理用户的个人资料（编辑个人资料，个人资料图片等）。

我设法成功地从API中检索了用户的信息，并向其中发送了用户名或密码之类的更改，但是我无法对个人资料图片进行更改。

我已经尝试使用axios（我用来与API通信的信息）：

async componentDidMount() {
const token = await this.getToken();
const AuthStr = 'Bearer '.concat(token);

await axios.get('https://....jpg', { headers: { Authorization: AuthStr } })
  .then(res => {
    console.log('RESPONSE: ', res.data);
  })
  .catch((error) => {
    console.log('error ' + error);
  });
}

但它会向我返回错误500

然后我尝试使用Expo中的FileSystem：

let download = FileSystem.createDownloadResumable('https://...jpg',
    FileSystem.documentDirectory + 'profile.jpg',
    { headers: { Authorization: AuthStr } },
    null,
    null);
    try {
      const { uri } = await download.downloadAsync();
      console.log('Finished downloading to ', uri);
      this.setState({
        pic: uri,
      });
    } catch (e) {
      console.error(e);
    }

    let info = await FileSystem.getInfoAsync(this.state.pic, null);
    console.log(info);

日志显示文件已下载，路径如下所示： file:///var/mobile/Containers/Data/Application/20CF6F63-E14D-4C14-9078-EEAF50A37DE1/Documents/ExponentExperienceData/%2540anonymous%app/profile.jpg

getInfoAsync（）返回true，表示该图像存在于文件系统中。当我尝试用 <Image source={{uri: this.state.pic}}/> 它什么也不显示。我该怎么办？

Answer 1

临时解决方案是将图像移至图库

let { uri } = await FileSystem.downloadAsync(this.props.item.imgUrl, FileSystem.cacheDirectory + ${this.props.item}.jpg);

const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);

if (status === 'granted') {

  CameraRoll.saveToCameraRoll(uri).then((uriGallery) => {
      //here you have the url of the gallery to be able to use it
  });

}

这是我在写答案时所指的link。

通过博览会显示个人资料图片

1 个答案: