一、前言
本篇文章是『云存储』文章的第 4 篇,主要介绍『云存储』获取临时路径
在上一篇文章中,我们详细介绍了如何删除云存储中的文件。本文将向大家阐述如何获取云存储文件的临时路径。
二、获取临时路径
首先,让我们思考两个问题。第一个,为什么需要获取文件的临时路径?第二个,直接使用云文件的地址不行吗?带着这两个问题,让我们继续探讨下去。
在介绍前,需要先说明一点:我们在云控制台上传的文件,默认只能在小程序中使用。如何验证这一点呢?举个简单的示例就能说明。
我编写了一个 image 组件并赋予其相应图片的 fileID,在小程序中运行以查看展示效果,代码如下:
代码语言:html复制<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 组件,在小程序内展示图片,效果同样理想。这部分就不展示截图了,大家可以亲自尝试一下。
代码语言:html复制<image src="https://636c-cloud1-5gnw7kej2c68cd30-1322890583.tcb.qcloud.la/dengdeng3.jpg" mode="widthFix" style="width: 100%;height: 100px;"></image>
三、总结
通过本文的学习,您将能够掌握以下核心知识点:
- 1.获取云存储文件的临时路径
- 2.临时路径的作用
最后,我要感谢您阅读本文。如果您觉得文章有用,请不吝点赞、收藏或者转发。您的支持是我不断创作与分享的最大动力。让我们携手在学习的旅途上相互促进,共同享受知识带来的快乐。
我正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!