微信小程序云开发-云存储文件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。
一般可以在前端访问大量图片或大尺寸图片缓慢时使用这种方式去优化。
在这里插入图片描述

四、结语(重要)

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

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker之Compose与DockerSwarm

目录 Compose 简介 概念 为什么需要&#xff1f; 配置字段 常用命令 安装 1.下载 2.授权 使用 1.创建文件 2.启动 docker Swarm 关键概念 调度策略 spread binpack random 特性 集群部署 1.准备 2.创建swarm并添加节点 在主服务器上创建swarm集群 节点…

8天长假快来了,Python分析【去哪儿旅游攻略】数据,制作可视化图表

目录 前言环境使用模块使用数据来源分析 代码实现导入模块请求数据解析保存 数据可视化导入模块、数据年份分布情况月份分布情况出行时间情况费用分布情况人员分布情况 前言 2023年的中秋节和国庆节即将来临&#xff0c;好消息是&#xff0c;它们将连休8天&#xff01;这个长假…

MongoDB入门

简介 MongoDB是一个开源、高性能、支持海量数据存储的文档型数据库 是NoSQL数据库产品中的一种&#xff0c;是最像关系型数据库&#xff08;MySQL&#xff09;的非关系型数据库 内部采用BSON(二进制JSON)格式来存储数据,并支持水平扩展。 MongoDB本身并不是完全免费的,它对于…

算法-图BFS/DFS-单词接龙

算法-图BFS/DFS-单词接龙 1 题目概述 1.1 题目出处 https://leetcode-cn.com/problems/number-of-islands 1.2 题目描述 给定两个单词&#xff08;beginWord 和 endWord&#xff09;和一个字典&#xff0c;找到从 beginWord 到 endWord 的最短转换序列的长度。转换需遵循如…

C++八股记录

C内存管理 C中&#xff0c;内存分成5个区。 栈&#xff1a;函数内局部变量&#xff1b;自动管理&#xff0c;效率高&#xff0c;但空间较小&#xff1b; 堆&#xff1a;new分配的内存块&#xff1b;手动管理&#xff0c;效率低&#xff0c;但空间大&#xff1b; 自由存储区&…

代码复现,我能行之DMP-MATLAB

代码复现&#xff0c;我能行——系列一 一、基础概念 Dynamic Movement Primitives &#xff08;DMP&#xff09;&#xff0c;中文为动态运动基元或动态运动原语&#xff0c;由美国University of Southern California的Stefan Schaal教授团队于2002年提出&#xff0c;是一种用…

2023年智慧政务一网通办云平台顶层设计与建设方案PPT

导读:原文《2023年智慧政务一网通办云平台顶层设计与建设方案PPT》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 部分内容:

计算机竞赛 基于Django与深度学习的股票预测系统

文章目录 0 前言1 课题背景2 实现效果3 Django框架4 数据整理5 模型准备和训练6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于Django与深度学习的股票预测系统 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff…

GIT 常用指令

基础指令 $ git init #初始化仓库&#xff0c;在该文件夹创建的为workspace$ git add . #已暂存 [.通配符&#xff0c;全部添加]$ git commit -m "log add file" #提交到仓库,并写了日志 ”log add file“$ git status #查看状态&#xff0c;可查看被修改的文件…

win11出现安全中心空白和IT管理员已限制对此应用的某些区域的访问

问题 windows安全中心服务被禁用 winr 输入services.msc 找到windows安全中心服务查看是否被禁用&#xff0c;改为启动&#xff0c;不可以改动看第三条 打开设置&#xff0c;找到应用—windows安全中心–终止–修复–重置 重启如果还是不行看第四条 家庭版系统需要打开gped…

新手指南:7个步骤制定成功的项目预算

每个项目都涉及成本。项目越大、越复杂&#xff0c;执行的时间和金钱成本就越高。企业不会拥有无限的资源&#xff0c;所以每个项目都需要项目预算。 但挑战在于&#xff1a;确定项目需要多少预算并不总是那么容易。低估需求&#xff0c;最终会导致人手短缺&#xff0c;无法按…

数组中出现次数超过一半的数字

⭐️ 题目描述 &#x1f31f; OJ链接&#xff1a;数组中出现次数超过一半的数字 思路&#xff1a; 采用投票计数的方式&#xff0c;我们可以把每个数字都看成一次投票并且计数&#xff0c;那么最后剩下来的就是数组中数字出现次数最多的那一个。比如 { 1,2,3,2,2,2,5,4,2 } &a…

《动手学深度学习》-57长短期记忆网络LSTM

沐神版《动手学深度学习》学习笔记&#xff0c;记录学习过程&#xff0c;详细的内容请大家购买书籍查阅。 b站视频链接 开源教程链接 长短期记忆网络&#xff08;LSTM&#xff09; 长期以来&#xff0c;隐变量模型存在长期信息保存和短期输入缺失的问题。解决这一问题的最早…

【C# Programming】编程入门:数组、操作符、控制流

目录 一、数组 1、数组的声明 1.1 一维数组声明&#xff1a; 1.2 多维数组声明&#xff1a; 2、数组的实例化和赋值 2.1 数组在声明时通过在花括号中使用以逗号分隔的数据项对数组赋值&#xff0c; 例如&#xff1a; 2.2 如果在声明后赋值&#xff0c;则需…

算法通过村第四关-栈青铜笔记|手写栈操作

文章目录 前言1. 栈的基础概要1.1 栈的特征1.2 栈的操作1.3 Java中的栈 2. 栈的实现&#xff08;手写栈&#xff09;2.1 基于数组实现2.2 基于链表实现2.3 基于LinkedList实现 总结 前言 提示&#xff1a;我自己一个人的感觉很好 我并不想要拥有你 除非你比我的独处更加宜人 --…

探索生成式人工智能的前景

一、什么是生成式人工智能&#xff1f; 生成式人工智能&#xff08;Generative AI&#xff09;是一类人工智能&#xff08;AI&#xff09;技术和模型&#xff0c;旨在创建新颖的内容。与简单的复制不同&#xff0c;这些模型通过利用从训练数据集中收集到的模式和见解&#xff…

nginx-concat

为了减少tcp请求数量&#xff0c;nginx从上有服务器获取多个静态资源&#xff08;css&#xff0c;js&#xff09;的时候&#xff0c;将多个静态资源合并成一个返回给客户端。 这种前面有两个问号的请求都是用了cancat合并功能。 先到官网下载安装包&#xff0c;拷贝到服务器编译…

弯道超车必做好题集锦三(C语言选择题)

前言&#xff1a; 编程想要学的好&#xff0c;刷题少不了&#xff0c;我们不仅要多刷题&#xff0c;还要刷好题&#xff01;为此我开启了一个弯道超车必做好题锦集的系列&#xff0c;每篇大约10题左右。此为第三篇选择题篇&#xff0c;该系列会不定期更新&#xff0c;后续还会…

C#_特性反射详解

特性是什么&#xff1f; 为程序元素额外添加声明信息的一种方式。 字面理解&#xff1a;相当于把额外信息写在干胶标签上&#xff0c;然后将其贴在程序集上。 反射是什么&#xff1f; 反射是一种能力&#xff0c;运行时获取程序集中的元数据。 字面理解&#xff1a;程序运行…

防溺水智能预警系统解决方案 yolov7

防溺水智能预警系统解决方案采用yolov7先进的AI视觉识别算法模型框架&#xff0c;防溺水智能预警系统解决方案算法实现对危险水域人员活动、水面情况等各项指标的监测和分析。当发现有人进入危险水域或出现紧急情况时&#xff0c;算法会立即发出预警信号。Yolo算法采用一个单独…