小程序缓存来自服务器的图片

Question

小程序中使用来自服务器的图片，将他缓存下来后，就不用每次一进入小程序再次去获取一次了。
但是只能在调试模式下看到，当小程序预览到手机上时，不打开调试模式，就看不到图片，这是为什么啊？

export default  function downloadAndCacheImage(imageUrl) {
  return new Promise((resolve, reject) => {
    const downloadTask = uni.downloadFile({
      url: imageUrl,
      success: (res) => {
        if (res.statusCode === 200) {
          // 下载成功，保存文件
          uni.saveFile({
            tempFilePath: res.tempFilePath,
            success: (saveRes) => {
              // 保存成功，返回文件路径
              resolve(saveRes.savedFilePath);
            },
            fail: (err) => {
              // 保存失败，返回错误信息
              reject(err);
            }
          });
        } else {
          // 下载失败，返回错误信息
          reject(new Error('Download failed with status code ' + res.statusCode));
        }
      },
      fail: (err) => {
        // 下载失败，返回错误信息
        reject(err);
      }
    });
  });
}

//使用图片
downloadAndCacheImage('https://xxx.com/1.jpg')
              .then(cachedFilePath => {
                console.log('图片缓存成功', cachedFilePath);
                this.banerUrl=cachedFilePath
              })
              .catch(error => {
                console.error('图片缓存失败', error);
              });

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这个问题可能是因为在手机预览模式下，小程序没有权限访问本地文件系统。当你在手机上打开调试模式时，小程序可以访问本地文件系统，因此可以看到缓存的图片。

为了解决这个问题，你可以尝试将图片缓存到微信的云存储中，这样即使在非调试模式下，也可以正常访问这些图片。你可以使用微信小程序的云开发功能来实现这个功能。以下是一个简单的示例：

1. 首先，确保你已经开通了云开发功能，并在小程序中初始化云开发环境。具体可以参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

2. 然后，使用云开发的uploadFile方法将图片上传到云存储，并获取到图片的云存储文件ID。

3. 最后，使用云存储的文件ID来展示图片，而不是直接使用本地文件路径。

以下是一个简化的代码示例：

// 引入云开发库
const cloud = require('wx-server-sdk')
cloud.init()

// 上传图片到云存储
async function uploadImageToCloud(imageUrl) {
  const res = await uni.downloadFile({ url: imageUrl })
  if (res.statusCode === 200) {
    const result = await cloud.uploadFile({
      cloudPath: 'your-folder/' + new Date().getTime() + '.jpg', // 自定义云存储路径和文件名
      filePath: res.tempFilePath,
    })
    return result.fileID // 返回云存储文件ID
  } else {
    throw new Error('Download failed with status code ' + res.statusCode)
  }
}

// 使用图片
uploadImageToCloud('https://xxx.com/1.jpg')
  .then(fileID => {
    console.log('图片上传成功', fileID);
    this.banerUrl = fileID // 使用云存储文件ID作为图片路径
  })
  .catch(error => {
    console.error('图片上传失败', error);
  });

这样，即使在非调试模式下，你也可以正常访问和使用这些图片。