一、前言
本篇文章是『云存储』文章的第 2 篇，主要介绍『云存储』下载文件
在前文中，我们详尽阐述了文件上传至云存储的全过程。现已掌握上传技巧，接下来，我们将详细探讨如何从云存储中有效下载文件。
二、主题
2.1.下载云存储中的文件
既然文件已经上传，接下来我们该如何操作才能将文件顺利下载至本地电脑呢？这个过程实际上非常直接。考虑到文件保存在云端，首先我们需要取得云端的存储对象。这可以通过访问 wx.cloud 接口轻松实现。
wx.cloud获得云端对象后，接下来您应使用一个名为 downloadFile 的方法来下载文件。您只需创建一个对象，并在该对象中指定您希望下载的文件。在编写此方法时，它会提供一个默认属性，称为 url。
您只需要提供 URL，系统便能够自动获取文件。此外，通过使用文件的 ID 属性，还可以实现直接从云存储获取文件的功能。这种方式简便高效，便于直接从云端管理文件。
首先，请登录云存储控制台。在您的文件列表中找到所需下载的图片文件。每个文件旁边，都配有一个独特的识别码，即 fileID。复制该 fileID 后，您就可以使用它来进行图片的下载操作。
接下来，我们将使用 wx.cloud.downloadFile 方法，并将获取的 fileID 传入 fileID 参数中。执行该方法后，您就可以成功下载文件了。
代码就成了如下所示：
代码语言：javascript复制async onDownTap() {
const res = await wx.cloud.downloadFile({
// 文件 ID
fileID: 'cloud://cloud1-5gnw7kej2c68cd30.636c-cloud1-5gnw7kej2c68cd30-1322890583/test/1705207755152.jpg',
});
console.log(res);
}下载文件的代码编写完毕，现在我们可以开始测试。运行代码，并在控制台中查看输出结果。系统将输出一个临时文件路径（tempFilePath），该路径即为下载文件所在位置。
如果您希望这个结果更加明显地突出显示，那么可以创建一个数据对象，并在该对象中定义一个名为 tempFilePath 的变量来存储下载文件的路径，接着在页面上将其展示出来。
最终逻辑 JS 代码如下：
代码语言：diff复制// index.js
data: {
tempFilePath: ""
},
...
async onDownTap() {
const res = await wx.cloud.downloadFile({
// 文件 ID
fileID: 'cloud://cloud1-5gnw7kej2c68cd30.636c-cloud1-5gnw7kej2c68cd30-1322890583/test/1705207755152.jpg',
});
console.log(res);
this.setData({
tempFilePath: res.tempFilePath
});
},2.2.显示已下载的云端存储文件
好的，代码编写到此已完成，成功将文件地址从云存储下载并保存。下一步，我们将开始编写页面。
首先打开项目的结构代码文件，即 index.wxml。在页面代码中加入 image 组件，并将之前保存的 tempFilePath 作为 src 属性的值赋予 image 组件。然后，配置 image 组件的 mode 属性为 widthFix。此外，调整样式设置，确定 image 的 width 为 100% 以铺满容器宽度，height 设置为 100px，以此确保图片能够适当展示。这样，照片就能在页面中正确显示了。
代码如下：
代码语言：html复制<image src="{{tempFilePath}}" mode="widthFix" style="width: 100%;height: 100px;"></image>2.3.测试结果
启动项目，导航至云存储相关的菜单项。当项目首次运行时，效果展示如下所示的图片：
出现空白区域的原因是在我们的数据（data）中相关变量目前为空字符串。为了解决这个问题，只需点击下载按钮。紧接着，之前编写的代码会执行，将文件的临时路径存入变量tempFilePath中。一旦数据更新，页面便能够检测到变化并刷新，这样我们就获取到了图片的临时路径，可以自由地进行使用了。此时，页面上就能展示出我们在云存储中的文件图片。最终的效果如图所示：
三、总结
通过本文的学习，您将能够掌握以下核心知识点：
- 1.下载云存储中的文件
- 2.显示已下载的云端存储文件
最后，我要感谢您阅读本文。如果您觉得文章有用，请不吝点赞、收藏或者转发。您的支持是我不断创作与分享的最大动力。让我们携手在学习的旅途上相互促进，共同享受知识带来的快乐。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
