『云存储』获取临时路径

一、前言

本篇文章是『云存储』文章的第 4 篇，主要介绍『云存储』获取临时路径

在上一篇文章中，我们详细介绍了如何删除云存储中的文件。本文将向大家阐述如何获取云存储文件的临时路径。

二、获取临时路径

首先，让我们思考两个问题。第一个，为什么需要获取文件的临时路径？第二个，直接使用云文件的地址不行吗？带着这两个问题，让我们继续探讨下去。

在介绍前，需要先说明一点：我们在云控制台上传的文件，默认只能在小程序中使用。如何验证这一点呢？举个简单的示例就能说明。

我编写了一个 image 组件并赋予其相应图片的 fileID，在小程序中运行以查看展示效果，代码如下：

<image src="cloud://cloud1-5gnw7kej2c68cd30.636c-cloud1-5gnw7kej2c68cd30-1322890583/dengdeng3.jpg" mode="widthFix" style="width: 100%;height: 100px;"></image>

代码非常的简单，只是一个 image 组件，src 属性赋予了图片的 fileID，然后设置了图片的宽度和高度，fileID 是我们在云控制台上传文件后获取的：

我们来看一下效果。

我们可以看到，在小程序中图片能够正常显示。但如果直接将链接粘贴到浏览器并回车，就会发现图片无法正常展示。

此示例印证了我的观点，由此解释了为何要讲解临时路径以及本文的要点。

重要提示：上传至云存储的文件默认仅限于小程序内使用。若需在其他环境中访问，必须通过生成临时路径的方法来实现。

经过上述验证，我们已经明白 “直接使用云文件的地址不行吗？” 这一问题的答案。下一步，我们将揭示 “为什么需要获取文件的临时路径？” 请继续关注。

下面，让我们来看看如何轻松获取临时路径。在小程序中，只需调用 wx.cloud.getTempFileURL 这个 API 就可以了，它的作用正是用于获取临时路径。接下来，我们将详细介绍这个 API 的使用方法。

首先提供下面的代码示例，它简单地调用了 wx.cloud.getTempFileURL API。您只需将所需文件的 fileID 放入数组中，再调用此 API，随即可获得其临时路径。具体代码如下：

async onTempPathTap() {
    const res = await wx.cloud.getTempFileURL({
        fileList: ['cloud://cloud1-5gnw7kej2c68cd30.636c-cloud1-5gnw7kej2c68cd30-1322890583/dengdeng3.jpg'],
    });

    console.log(res);
},

我们来分析一下该 API 的参数。wx.cloud.getTempFileURL 只接受一个参数，即 fileList。这是一个数组，您应当将那些需要获取临时路径的文件的 fileID 加入此数组。调用此 API 后，便可获得这些文件的临时路径。接下来，我们来看这个 API 的返回结果。

返回结果是一个包含 fileList 属性的对象，其保存了本次请求的文件临时路径。在 fileList 中，每个对象都含有 tempFileURL 属性，它即是我们所需的临时路径。将这个临时路径复制到浏览器地址栏并回车，我们的图片即可正常显示。

当然，我们也可以把这个临时路径赋给 image 组件，在小程序内展示图片，效果同样理想。这部分就不展示截图了，大家可以亲自尝试一下。

<image src="https://636c-cloud1-5gnw7kej2c68cd30-1322890583.tcb.qcloud.la/dengdeng3.jpg" mode="widthFix" style="width: 100%;height: 100px;"></image>

三、总结

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

• 1.获取云存储文件的临时路径
• 2.临时路径的作用

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

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