微信小程序云开发-云存储文件ID转http

一、前言

云开发的云储存文件默认是以cloudID的形式读取的,但是这种读取方式只能在微信小程序或内嵌H5中使用。

所以如果需要在其他地方使用,例如浏览器或网站等其他端读取文件的时候,需要转换成普通的http链接。

目前官方提供有转换的接口:获取云文件临时https链接

但是如果有批量的文件需要转换,那每次都要调用这个接口的话效率比较低下,所以本文使用了本地匹配转换的方式,将cloudID转换成https链接。

二、注意事项

本文的转换方式仅仅适用于云存储文件访问权限为公开读的情况,如果文件是非公开读的,只能调用官方的接口进行转换。
在这里插入图片描述

三、代码实现以及运行效果

代码实现

/*** cloudID通过处理转化成https链接* @param {*} cloudId 云储存文件id* @param {*} styleName 云储存图片处理样式名称(可选)* @returns*/
const cloudId2Http = (cloudId, styleName) => {if (!cloudId) return "请传入cloudID";const strs = cloudId.split(".");const strs_2 = strs[1];const strs_3 = strs_2.split("/");const envId = strs_3[0];const https_prefix = `https://${envId}.tcb.qcloud.la/`;let filePath = "";for (let i = 1; i < strs_3.length; i++) {if (i === strs_3.length - 1) {const fileName = strs_3[i] + "." + strs[strs.length - 1];filePath += fileName;} else {filePath += strs_3[i] + "/";}}let httpsUrl = https_prefix + filePath;if (styleName) httpsUrl += "/" + styleName;return httpsUrl;
};

运行效果

在这里插入图片描述

浏览器访问图片链接

在这里插入图片描述

三、额外拓展

该方法转换还支持输出云储存的图片处理结果路径。

配置图片样式

下图是将图片进行缩放,等比缩放,限制宽为100px,输出格式为webp格式。
也就是在读取图片的时候,会先将图片进行处理后再返回给前端。

注意:如果出现创建样式失败的情况,关闭开发者工具后重新打开项目进行创建,如果还是不行,就多试几次。

在这里插入图片描述

调用函数

在这里插入图片描述

浏览器访问结果

图片的尺寸已经转化成宽度100px,高度同比例缩放的样式了,格式也从jpg转成了webp。
一般可以在前端访问大量图片或大尺寸图片缓慢时使用这种方式去优化。
在这里插入图片描述

四、结语(重要)

最后来一下常规结语:
实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。
👍赞一个!!!
🤩当然,顺带收藏就最好了。
😎欢迎转载,原创不易,转载请注明出处✍️。

😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/90984.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatGPT训练过程

强化学习基础 强化学习是指智能体在不确定环境中最大化其获得的奖励从而达到自主决策的目的。其执行过程为&#xff1a;智能体依据策略决策从而执行动作&#xff0c;然后感知环境获取环境的状态&#xff0c;进而得到奖励(以便下次再到相同状态时能采取更优的动作)&#xff0c;…

金融风控数据分析-信用评分卡建模

本文引用自&#xff1a; 金融风控&#xff1a;信用评分卡建模流程 - 知乎 (zhihu.com) 在原文的基础上加上了一部分自己的理解&#xff0c;转载在CSDN上作为保留记录。 本文涉及到的数据集可直接从天池上面下载&#xff1a; Give Me Some Credit给我一些荣誉_数据集-阿里云…

前端基础(Element、vxe-table组件库的使用)

前言&#xff1a;在前端项目中&#xff0c;实际上&#xff0c;会用到组件库里的很多组件&#xff0c;本博客主要介绍Element、vxe-table这两个组件如何使用。 目录 Element 引入element 使用组件的步骤 使用对话框的示例代码 效果展示 vxe-table 引入vxe-table 成果展…

Leetcode每日一题:1267. 统计参与通信的服务器

原题 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其…

iSCSI存储服务器

目录 一、ISCSI是什么&#xff1f; 二、ISCSI产生背景 三、存储分类 四、ISCSI架构 五、ISCSI存储服务搭建案例 一、ISCSI是什么&#xff1f; ISCSI名为互联网小型计算机系统接口又称为IP-SAN&#xff0c;是一种新的远程存储技术&#xff0c;提供存储服务的目标服务器默认使用的…

hadoop学习:mapreduce入门案例四:partitioner 和 combiner

先简单介绍一下partitioner 和 combiner Partitioner类 用于在Map端对key进行分区 默认使用的是HashPartitioner 获取key的哈希值使用key的哈希值对Reduce任务数求模决定每条记录应该送到哪个Reducer处理自定义Partitioner 继承抽象类Partitioner&#xff0c;重写getPartiti…

PSP - 蛋白质结构预测 OpenFold Multimer 模型训练参数与配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132575709 OpenFold Multimer 是用于预测蛋白质多聚体结构的计算方法。基于OpenFold 的单体预测框架&#xff0c;利用深度学习技术&#xff0c;结…

31 - 个人博客项目-02-定义模型

前提: settings.py已经连接数据库 两张表想要互相调用 必须定义主外键约束,外键定义在多的一方 (1). 新建 apps / user / models.py 创建用户相关模型类 from datetime import datetime from ext import dbclass User(db.Model):# 用户表id db.Column(db.Integer, primary…

在Ubuntu Linux系统上安装RabbitMQ服务并解决公网远程访问问题

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…

使用Visual Studio 2022实现透明按钮和标签、POPUP样式窗体的一种工业系统的UI例程

例程实现的功能说明 1、主窗体采用POPUP样式&#xff0c;无标题栏、无菜单栏&#xff0c;适合工业类软件 2、按钮、标签使用自绘&#xff0c;实现透明样式&#xff0c;可以实现灵活的样式设计&#xff0c;更具设计感 按钮重绘函数&#xff1a;OnDrawItem()按钮样式设定&#…

URL重定向漏洞

URL重定向漏洞 1. URL重定向1.1. 漏洞位置 2. URL重定向基础演示2.1. 查找漏洞2.1.1. 测试漏洞2.1.2. 加载完情况2.1.3. 验证漏洞2.1.4. 成功验证 2.2. 代码修改2.2.1. 用户端代码修改2.2.2. 攻击端代码修改 2.3. 利用思路2.3.1. 用户端2.3.1.1. 验证跳转 2.3.2. 攻击端2.3.2.1…

六、事务-3.事务四大特性

1、原子性 事务是一组操作&#xff0c;这组操作是不可分割的最小操作单元&#xff0c;这组操作要么全部执行成功&#xff0c;要么全部执行失败。 如&#xff1a;三步转账操作&#xff0c;当中只要有一步操作失败了&#xff0c;整个就失败了。 2、一致性 事务完成时&#xff…