『云存储』下载文件

一、前言

本篇文章是『云存储』文章的第 2 篇，主要介绍『云存储』下载文件

在前文中，我们详尽阐述了文件上传至云存储的全过程。现已掌握上传技巧，接下来，我们将详细探讨如何从云存储中有效下载文件。

二、主题

2.1.下载云存储中的文件

既然文件已经上传，接下来我们该如何操作才能将文件顺利下载至本地电脑呢？这个过程实际上非常直接。考虑到文件保存在云端，首先我们需要取得云端的存储对象。这可以通过访问 wx.cloud 接口轻松实现。

wx.cloud

获得云端对象后，接下来您应使用一个名为 downloadFile 的方法来下载文件。您只需创建一个对象，并在该对象中指定您希望下载的文件。在编写此方法时，它会提供一个默认属性，称为 url。

您只需要提供 URL，系统便能够自动获取文件。此外，通过使用文件的 ID 属性，还可以实现直接从云存储获取文件的功能。这种方式简便高效，便于直接从云端管理文件。

首先，请登录云存储控制台。在您的文件列表中找到所需下载的图片文件。每个文件旁边，都配有一个独特的识别码，即 fileID。复制该 fileID 后，您就可以使用它来进行图片的下载操作。

接下来，我们将使用 wx.cloud.downloadFile 方法，并将获取的 fileID 传入 fileID 参数中。执行该方法后，您就可以成功下载文件了。

代码就成了如下所示：

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 代码如下：

// 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，以此确保图片能够适当展示。这样，照片就能在页面中正确显示了。

代码如下：

<image src="{{tempFilePath}}" mode="widthFix" style="width: 100%;height: 100px;"></image>

2.3.测试结果

启动项目，导航至云存储相关的菜单项。当项目首次运行时，效果展示如下所示的图片：

出现空白区域的原因是在我们的数据（data）中相关变量目前为空字符串。为了解决这个问题，只需点击下载按钮。紧接着，之前编写的代码会执行，将文件的临时路径存入变量tempFilePath中。一旦数据更新，页面便能够检测到变化并刷新，这样我们就获取到了图片的临时路径，可以自由地进行使用了。此时，页面上就能展示出我们在云存储中的文件图片。最终的效果如图所示：

三、总结

通过本文的学习，您将能够掌握以下核心知识点：

• 1.下载云存储中的文件
• 2.显示已下载的云端存储文件

最后，我要感谢您阅读本文。如果您觉得文章有用，请不吝点赞、收藏或者转发。您的支持是我不断创作与分享的最大动力。让我们携手在学习的旅途上相互促进，共同享受知识带来的快乐。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！