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

🚀前言

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

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

🚀一、使用云存储

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

🔎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 使用云文件在小程序中展示

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

示例代码（展示图片）：

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

🦋1.8 总结

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

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

🔎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 总结

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

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