【愚公系列】《微信小程序与云开发从入门到实践》048-使用云存储

举报
愚公搬代码 发表于 2025/01/28 15:44:51 2025/01/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

在信息技术飞速发展的今天,数据的存储和管理变得尤为重要。对于微信小程序的开发者而言,如何高效、安全地存储和访问用户数据、应用资源,直接影响到小程序的性能和用户体验。云存储作为一种现代化的数据存储解决方案,以其灵活性、可扩展性和高可用性,成为了小程序开发中的重要工具。

本文将深入探讨微信小程序中云存储的使用,包括云存储的基本概念、核心功能以及在实际开发中的应用场景。我们将介绍如何利用微信云存储服务来管理文件的上传、下载和删除等操作,帮助开发者轻松应对各种数据存储需求。同时,我们还将分享一些最佳实践和常见问题解决方案,以确保您在使用云存储时能够获得最佳的开发体验。

🚀一、使用云存储

云数据库主要用来存储结构化的数据,云存储能力则主要提供远端储存文件的功能,最常见的场景是对图片文件、音频文件和视频文件的云存储支持。

🔎1.在小程序中使用云存储功能

🦋1.1 云存储的应用场景

在小程序中,存储文件到本地存储是常见的做法,但这只能保证文件在当前设备上可用。如果用户切换设备或卸载了微信应用,文件可能无法再访问。这时,云存储 能够提供解决方案,使文件跨设备、跨平台可用。

应用场景:

  • 用户切换设备时,文件依然可用。
  • 用户卸载微信后,再次安装微信时,仍可访问存储在云端的文件。

🦋1.2 示例工程 - cloudStorageDemo 页面

在示例工程中,创建了一个名为 cloudStorageDemo 的页面,用于演示如何在小程序中使用云存储功能。具体操作包括文件的上传、下载和删除。

🦋1.3 上传文件到云存储

上传文件到云存储的流程如下:

  1. 下载文件:首先,使用 wx.downloadFile() 下载一个文件到本地。
  2. 上传到云存储:然后,调用 wx.cloud.uploadFile() 将下载的文件上传到云存储。

示例代码:

Page({
  onLoad: function(options) {
    // 初始化云开发环境
    wx.cloud.init({
      env: 'cloud1-4ghg65i9b5531b77'
    });
  },
  
  upload: function() {
    // 从互联网下载文件
    wx.downloadFile({
      url: 'http://huishao.cc/img/head-img.png', // 文件的网络路径
      success: (res) => {
        // 上传到云存储
        wx.cloud.uploadFile({
          filePath: res.tempFilePath, // 本地临时文件路径
          cloudPath: '1.png', // 云存储中的文件路径
          success: function(info) {
            console.log(info); // 输出上传成功的信息
          }
        });
      }
    });
  }
});
  • wx.cloud.uploadFile():将本地文件上传到云存储。
  • filePath:上传的本地文件路径,必须是本地路径。
  • cloudPath:云存储中的文件路径,可以自定义文件名。

上传成功后,回调函数的 info 参数中会返回一个 fileID,这是云存储中文件的唯一标识符。通过这个 fileID,可以直接访问和操作云存储中的文件。

🦋1.4 下载云存储中的文件到本地

要将云存储中的文件下载到本地,使用 wx.cloud.downloadFile() 方法。传入文件的 fileID,即可下载文件到本地路径。

示例代码:

wx.cloud.downloadFile({
  fileID: 'cloud://cloud1-4ghg6519b5531b77.636c-cloud1-4ghg65i9b5531b77-1308596385/1.png', // 云存储中的文件ID
  success: function(res) {
    console.log(res.tempFilePath); // 输出下载后的本地文件路径
  }
});
  • fileID:云存储中文件的唯一标识符。
  • tempFilePath:下载到本地的临时文件路径。

🦋1.5 删除云存储中的文件

删除文件的方法也与下载类似,通过文件的 fileID 来进行操作。使用 wx.cloud.deleteFile() 删除云存储中的文件。

示例代码:

wx.cloud.deleteFile({
  fileList: [
    'cloud://cloud1-4ghg6519b5531b77.636c-cloud1-4ghg65i9b5531b77-1308596385/1.png' // 云存储中文件的fileID
  ],
  success: function(res) {
    console.log(res); // 输出删除操作结果
  }
});
  • fileList:一个包含多个 fileID 的数组,可以一次删除多个文件。

🦋1.6 与云存储相关的关键方法

小程序云存储中最常用的三个方法是:

  1. 文件上传:使用 wx.cloud.uploadFile() 将本地文件上传到云存储。
  2. 文件下载:使用 wx.cloud.downloadFile() 下载云存储中的文件到本地。
  3. 文件删除:使用 wx.cloud.deleteFile() 删除云存储中的文件。

🦋1.7 使用云文件在小程序中展示

某些小程序原生组件(如 imageaudio 等)支持直接通过云文件的 fileID 来使用云存储的文件。例如,可以直接将 fileID 绑定到 image 组件的 src 属性,来显示云存储中的图片。

示例代码(展示图片):

<image src="{{fileID}}"></image>

🦋1.8 总结

  • 云存储:通过云存储,可以将文件存储到云端,实现跨设备访问和数据持久化。
  • 文件上传:使用 wx.cloud.uploadFile() 上传文件到云存储,上传成功后返回 fileID
  • 文件下载:使用 wx.cloud.downloadFile() 下载云存储中的文件到本地。
  • 文件删除:使用 wx.cloud.deleteFile() 删除云存储中的文件。
  • 组件使用:某些小程序原生组件(如 imageaudio)支持直接使用云存储中的文件。

云存储为小程序提供了一个稳定的解决方案,确保文件在设备间的同步与跨平台访问,极大地增强了数据的可用性与可靠性。

🔎2.云存储文件管理

🦋2.1 云存储管理模块概述

云开发控制台 中,存储模块主要包括以下几个管理功能:

  • 存储管理
  • 权限管理
  • 缓存配置
  • 图片处理

这些功能帮助开发者更加高效地管理和使用云存储中的文件。

🦋2.2 存储管理

存储管理 主要用于对云文件的上传、删除以及文件夹管理。

  • 文件上传与删除:可以直接上传文件到云存储,也可以删除已有的文件。
  • 文件夹管理:支持上传文件夹或创建新文件夹,方便文件的组织和管理。
  • 查看文件信息:对于已经上传的文件,用户可以查看其详细信息,如:
    • 文件大小
    • 文件格式
    • 上传者
    • 最后更新时间
    • 下载地址
    • 文件ID

在这里插入图片描述

🦋2.3 权限管理

云文件权限管理云数据库权限管理 类似,主要是对文件的 可读性可写性 进行控制。权限管理可以根据不同的应用场景设置适当的权限:

  • 公开文件:对于公开文件,可以设置为 所有用户可读,或者 仅创建者可读写
  • 私有文件:对于私有文件,通常只允许文件的创建者进行读取和写入操作。

在这里插入图片描述

🦋2.4 缓存配置

缓存配置 是针对云文件的缓存规则进行设置。合理的缓存配置可以显著提升文件访问的效率,并节省流量消耗。

  • 缓存配置:合理设置缓存时间,能够避免频繁的文件下载,提高用户体验,并减少带宽消耗。

🦋2.5 图片处理

云存储提供了强大的 图片处理 功能,支持图片的裁剪和缩放。许多场景中,同一张图片可能需要根据不同需求进行不同的裁剪和缩放。

  • 图片处理功能:可以设置不同的图片处理样式,统一管理图片的裁剪和缩放,确保在各种场景中都能以合适的尺寸和格式展现图片。

    如图11-19所示。

🦋2.6 文件命名规则

在使用云存储时,上传的文件名需要遵循一定的规则,以确保文件能够正常存储和管理。具体规则如下:

  1. 文件名不能为空
  2. 文件名不能以“/”开头
  3. 文件名中不能出现连续的“/”符号
  4. 文件名的最大长度为850个字节
  5. 文件名中不支持 ASCII 控制字符
  6. 文件名中包含中文时,中文部分会按照 URL Encode 规则进行编码。

🦋2.7 总结

  • 存储管理:支持文件上传、删除、文件夹创建以及查看文件详细信息。
  • 权限管理:可以设置文件的访问权限(公开、私有等),根据需求控制文件的可读写性。
  • 缓存配置:合理配置缓存时间,以提高效率并节省流量。
  • 图片处理:统一管理图片的裁剪和缩放,以适应不同的使用场景。
  • 文件命名规则:确保文件名遵守一定规则,如长度限制、不能使用控制字符等。

通过这些功能,开发者能够更方便、高效地管理云存储中的文件,提升用户体验,减少资源消耗。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。