微信小程序下载网络图片保存到本地

问题背景

前一篇文章介绍了，微信小程序网络请求数据并在页面列表显示(参考 https://blog.51cto.com/baorant24/6189453 )，本文将介绍微信小程序是如何获取网络图片并保存到本地的。

问题分析

关键环节分析如下：

(1)微信小程序判断目录/文件是否存在 FileSystemManager.access(Object object)，参考官方文档( https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.access.html )，示例代码如下：

const fs = wx.getFileSystemManager()
// 判断文件/目录是否存在
fs.access({path: `${wx.env.USER_DATA_PATH}/hello.txt`,success(res) {// 文件存在console.log(res)},fail(res) {// 文件不存在或其他错误console.error(res)}
})// 同步接口
try {fs.accessSync(`${wx.env.USER_DATA_PATH}/hello.txt`)
} catch(e) {console.error(e)
}

(2)FileSystemManager.access 的同步版本 FileSystemManager.accessSync(string path)，参考官方文档( https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.accessSync.html )，示例代码如下：

const fs = wx.getFileSystemManager()
// 判断文件/目录是否存在
fs.access({path: `${wx.env.USER_DATA_PATH}/hello.txt`,success(res) {// 文件存在console.log(res)},fail(res) {// 文件不存在或其他错误console.error(res)}
})// 同步接口
try {fs.accessSync(`${wx.env.USER_DATA_PATH}/hello.txt`)
} catch(e) {console.error(e)
}

(3)获取图片信息。网络图片需先配置download域名才能生效。 wx.getImageInfo(Object object)，参考官方文档( https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html )，示例代码如下：

wx.getImageInfo({src: 'images/a.jpg',success (res) {console.log(res.width)console.log(res.height)}
})

问题解决

话不多说，直接上代码。

(1)index.js文件，代码如下：

// pages/healdata/healthydata.ts
Page({/*** 页面的初始数据*/data:{code:"0",location:[],imageUrl: "https://profile-avatar.csdnimg.cn/default.jpg!0"},/* 保存图片 */save_photo: function () {const fs = wx.getFileSystemManager()var isExist = false; //目录是否存在var that = this;// 同步接口，判断路径是否存在try {fs.accessSync(`${wx.env.USER_DATA_PATH}/photoinvoice/1553115`)isExist = true;} catch (e) {console.error(e)}if (isExist != true) {// 同步接口,创建目录try {fs.mkdirSync(`${wx.env.USER_DATA_PATH}/photoinvoice/1553115`, true)console.log('mkdirSync')} catch (e) {console.error(e)}}console.log('USER_DATA_PATH: ' + `${wx.env.USER_DATA_PATH}/photoinvoice/1553115`)console.log('imageUrl: ' + that.data.imageUrl)// 获取图片wx.getImageInfo({src: this.data.imageUrl,success: function (res) {var path = res.path;console.log("path: " + path) var startPos = path.lastIndexOf("//");console.log(startPos)var picName = path.slice(startPos + 2, path.length); //加2是为了从//后面截取。所以+2，把//过滤掉console.log("picName " + picName)fs.saveFile({tempFilePath: path,filePath: `${wx.env.USER_DATA_PATH}/photoinvoice/1553115/${picName}`, //保存的时候必须跟上路径和文件名success: function (res) {console.log("保存成功")console.log(res)},fail: function (res) {console.log("保存失败")console.log(res)}})}})},
})

(2)index.wxml文件，代码如下：

<view><button class="buttonStyle" type="primary" bindtap="save_photo">请求网络</button><view>结果返回：{{code}}</view>
</view>

(3)index.wxss文件，代码如下：

/* 设置swiper组件的宽高 */
.swiper{width: 100%;height: 600rpx;
}
/* 设置swiper组件里面图片的宽高 */
.image{width: 100%;height: 600rpx;
}.content1{/* text-align: center; */display: flex;flex-direction: row;justify-content: space-between;margin: 10rpx;
}.buttonStyle{margin-top: 120rpx;
}.place{font-style: italic;
}

模拟器运行结果如下：保存文件到本地系统目录失败，报错： "saveFile:fail no such file or directory http://usr/photoinvoice/1553115/tmp/9UXFbyUvzCtwc7bc5bf164499999108eb505ceca5952.png"。

解决方案： 切换到真机测试

运行结果如下：

问题总结

本文介绍了微信小程序是如何获取网络图片并保存到本地的，有兴趣的同学可以进一步深入研究。