微信小程序项目图片如何保存到本地的方法

75 阅读 0 评论 50 点赞

我是靠谱客的博主含糊网络，最近开发中收集的这篇文章主要介绍微信小程序项目图片如何保存到本地的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先来看小程序中的保存图片到相册的api

wx.saveImageToPhotosAlbum({
  filePath : "./test.png",   //这个只是测试路径，没有效果
  success(res) {
    console.log("success");
  },
  fail : function(res) {
    console.log(res);
  }
})

上面的saveImageToPhotosAlbum的用法是不能获取到文件的，因为filePath在官方的说法是可以是临时文件路径或永久文件路径。

而"filePath : ./test.png"只是一个相对路径（相对小程序项目来说的一个路径），而我们需要的是临时文件路径或永久文件路径。

下面说一下三者的区别：

相对路径:小程序项目中相对的文件路径。

临时文件路径：从网络上下载或其他形式生成的文件，但是只保存在内存中，没有保存到小程序目录中的文件路径。

永久文件路径：小程序项目中文件中的全文件路径。

注：相对路径和永久文件路径可能是同一个文件，只是引用的路径名不一样而已（一个是相对的，一个是绝对的）。

其中临时文件路径我们可以这样获得来保存文件到相册：

wx.downloadFile({
  url: 'https://example.com/audio/123',     //仅为示例，并非真实的资源
  success: function (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          wx.showToast({
            title: '保存图片成功！',
          })
        },
        fail(res) {
          wx.showToast({
            title: '保存图片失败！',
          })
        }
      })
    }
  }
})

用downloadFile只可以获取网络上的图片资源；而getImageInfo则是全能类型，不管是网络上的图片资源，还是小程序中保存的图片。

官方上的说法：getImageInfo的src参数的图片路径可以是相对路径、临时文件路径、存储文件路径（即上面说的全路径）、网络图片路径。

wx.downloadFile({
  url: 'https://example.com/audio/123',     //仅为示例，并非真实的资源
  success: function (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          wx.showToast({
            title: '保存图片成功！',
          })
        },
        fail(res) {
          wx.showToast({
            title: '保存图片失败！',
          })
        }
      })
    }
  }
})

总结：

wx.getImageInfo功能更加强大；但是downloadFile则更加专业，因为downloadFile可以读取下载进度等功能。

跨平台框架uni-app基于微信小程序同理。

原文：https://blog.csdn.net/u013654125/article/details/80500306