『云存储』上传文件

一、前言

本篇文章是『云存储』文章的第 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.上传文件到云存储

我们先来看一段代码示例，之后将对其进行详细解释：

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.代码解释

为了逐步理解整段代码，我们首先从获取相册中图片这一步开始讲解：

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 参数，设定为期望的云端路径即可。

进入 “test” 文件夹查看，可以确认图片已成功上传。

五、总结

通过本文的学习，您将能够掌握以下核心知识点：

• 1.如何使用 wx.chooseMedia 方法从相册中选取图片
• 2.如何使用 wx.cloud.uploadFile 方法将图片上传至云存储
• 3.如何动态生成文件名称，以确保文件名的唯一性
• 4.如何在云存储中创建文件夹，并将文件上传至指定文件夹

最后，我要感谢您阅读本文。如果您觉得文章有用，请不吝点赞、收藏或者转发。您的支持是我不断创作与分享的最大动力。让我们携手在学习的旅途上相互促进，共同享受知识带来的快乐。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！