一、前言
本篇文章是『云存储』文章的第 1 篇，主要介绍『云存储』上传文件
通过前几篇文章，已经全面讲解了微信云数据库的 CRUD（创建、读取、更新、删除）操作。现在，我将向大家展示如何使用微信云存储服务，具体来说，我们会学习如何通过编写代码将文件上传到云端存储中。
二、搭建环境
为了实现代码的触发，我们首先要构建基础的交互元素。具体来说，需要修改 pages/cloud-storage/index.wxml 文件，来搭建基础的页面布局。我们将主要加入四个功能按钮，以实现不同的操作。相关的代码展示如下：
<button type="primary" bindtap="onUpTap">上传</button>
<button type="primary" bindtap="onDownTap">下载</button>
<button type="primary" bindtap="onDelTap">删除</button>
<button type="primary" bindtap="onTempPathTap">获取临时路径</button>我们已经完成了页面结构的代码编写。下一步，将转向 pages/cloud-storage/index.js 文件，以便添加相关按钮的点击事件处理函数。下面是具体的实现代码：
Page({
onUpTap() {
},
onDownTap() {
},
onDelTap() {
},
onTempPathTap() {
},
})至此，页面结构与相关逻辑都已搭建完毕，可以继续往下学习。
三.上传文件
正如前文所述，在进行云数据库操作前，必须先获取数据库的引用才能执行增、删、改、查等操作。云存储的使用逻辑也如出一辙，我们需要先获得云存储的引用，之后才能顺利进行文件上传等相关操作。
那么，我们如何获取到云存储的引用呢？操作起来非常简便。只需使用 wx.cloud 这一接口，我们就可以轻松获取云存储的引用，然后利用 uploadFile 方法进行文件上传。
3.1.上传文件到云存储
我们先来看一段代码示例，之后将对其进行详细解释：
代码语言：javascript复制async onUpTap() {
// 1. 拿到相册中的图片
const images = await wx.chooseMedia({
type: "image"
});
const imagePath = images.tempFiles[0].tempFilePath;
// 2.动态生成文件名称
const timeStamp = new Date().getTime();
// 文件后缀
const extension = imagePath.split(".").pop();
const cloudPath = `test/${timeStamp}.${extension}`;
const res = await wx.cloud.uploadFile({
// 被上传文件路径
filePath: imagePath,
// 存储在云端路径
cloudPath: cloudPath
});
console.log(res);
},3.2.代码解释
为了逐步理解整段代码，我们首先从获取相册中图片这一步开始讲解：
代码语言：javascript复制const images = await wx.chooseMedia({
type: "image"
});首先，利用 wx.chooseMedia 方法，我们能够浏览相册并选取照片。选取完成后，所选图片的路径便会被保存至 imagePath 变量中：
const imagePath = images.tempFiles[0].tempFilePath;
下一步是为文件动态生成一个名称。我们通过调用 new Date().getTime() 获取当前的时间戳，并使用它作为文件名的一部分来确保其唯一性。同时，我们还需提取文件的扩展名，以便于在云存储中正确地识别文件类型。
const timeStamp = new Date().getTime();
// 文件后缀
const extension = imagePath.split(".").pop();
const cloudPath = `test/${timeStamp}.${extension}`;最终步骤是将图片上传到云存储，这可以通过 wx.cloud.uploadFile 方法实现。调用该方法时，需要提供两个关键参数：一是 filePath，表示待上传文件所在的本地路径；二是 cloudPath，指定文件在云端存储中的目标路径。
const res = await wx.cloud.uploadFile({
// 被上传文件路径
filePath: imagePath,
// 存储在云端路径
cloudPath: cloudPath
});
console.log(res);
四、上传结果
注意到创建了一个名为 “test” 的文件夹，并且图片被上传到了这个文件夹里。这是由于我们在 cloudPath 参数中预设了云端的存储路径，因此出现了这个结果。
若需上传图片或文件到特定文件夹，只须修改 cloudPath 参数，设定为期望的云端路径即可。
五、总结
通过本文的学习，您将能够掌握以下核心知识点：
- 1.如何使用
wx.chooseMedia方法从相册中选取图片 - 2.如何使用
wx.cloud.uploadFile方法将图片上传至云存储 - 3.如何动态生成文件名称，以确保文件名的唯一性
- 4.如何在云存储中创建文件夹，并将文件上传至指定文件夹
最后，我要感谢您阅读本文。如果您觉得文章有用，请不吝点赞、收藏或者转发。您的支持是我不断创作与分享的最大动力。让我们携手在学习的旅途上相互促进，共同享受知识带来的快乐。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
