文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

【云开发】- 在小程序端操作云存储

2023-09-02 05:57

关注

文章目录

云存储介绍

云存储用于将文件存储到云端:

云存储提供高可用、高稳定、强安全的云端存储服务;

持任意数量和形式的非结构化数据存储,如视频和图片;

并在控制台进行可视化管理;

云存储常见的操作:

上传文件到云存储中(图片、视频、音频等等都可以)

获取文件的临时链接(在外网可以访问)

下载文件到本地(本地文件缓存)

将云存储中的文件删除

手动操作云存储

和云数据库一样, 可以手动在控制台进行操作, 操作步骤如下

例如上传一个图片文件到云存储中, 在控制台点击上传文件, 选择上传的文件即可

在这里插入图片描述

上传完成后会有一个唯一的fileID在项目中显示

在这里插入图片描述

根据这个fileID我们在可以在前端获取URL, 并展示

<image src="cloud://cloud1-0g75nm8011e44998.636c-cloud1-0g75nm8011e44998-1313411765/勋章电子证书.png">image>

除了图片外, 视频音频等等都是一样的操作

小程序端操作云存储

在真实开发中, 我们一般不是手动的在控制台操作云存储, 更多的是在小程序端操作, 接下来我会讲解在小程序端操作云存储的方法

在小程序端, 我主要讲解上传文件、下载文件、删除文件、临时文件, 为了方便演示, 我分别创建四个按钮, 在这四个按钮的点击事件中分别演示小程序端的操作

<button type="primary" bindtap="onUpLoadTap">上传文件button><button type="primary" bindtap="onDownLoadTap">下载文件button><button type="primary" bindtap="onDeleteTap">删除文件button><button type="primary" bindtap="onTempFileTap">临时文件button>
onUpLoadTap() {},onDownLoadTap() {},onDeleteTap() {},onTempFileTap() {}

上传文件

**上传文件通过wx.cloud.uploadFileAPI, 该API要求传入一个对象 **

filePath属性表示上传图片的路径

cloudPath属性表示要上传到云端文件的名称, 一般这个名称是动态生成的, 并且这个名称尽量做到不重复; 图片默认会上传到云端根目录, 可以指定文件夹

上传文件分为以下几个步骤

首先需要选中本地文件(从相册/拍照)

获取到图片的路径

将这张图片上传到云存储当中

async onUpLoadTap() {  // 1.选择一张本地的照片  const imageRes = await wx.chooseMedia({    type: "image"  })  console.log(imageRes);  // 2.获取图片路径  const imagePath = imageRes.tempFiles[0].tempFilePath  // 3,上传到云存储  // 动态生成名称的操作  const timestamp = new Date().getTime() // 获取时间戳保证图片名称唯一  const openid = "open_xx " // 获取openid防止同一时间, 不同的人上传了相同名称  const extension = imagePath.split(".").pop()  const imageName = `${timestamp}_${openid}.${extension}`  // 调用API上传图片  const uploadRes = await wx.cloud.uploadFile({    filePath: imagePath,    // 默认上传到云端根目录    cloudPath: imageName  })  console.log(uploadRes);}

指定文件夹上传

// 调用API上传图片const uploadRes = await wx.cloud.uploadFile({  filePath: imagePath,  // 上传到指定文件夹  cloudPath: "image/" + imageName})

下载文件

如果文件是放在云存储中,那么必然需要有网络的情况下才能访问

某些情况下,我们可能希望把某些重要的文件下载到本地,就可以使用云存储的文件下载了

下载是通过wx.cloud.downloadFileAPI, API中fileID属性传入要下载文件的fileID

async onDownLoadTap() {const res = await wx.cloud.downloadFile({  fileID: "cloud://cloud1-0g75nm8011e44998.636c-cloud1-0g75nm8011e44998-1313411765/image/1661571031747_open_xx .png"  })  console.log(res);}

删除文件

某些文件不再使用时,可以将其从云存储中删除掉,这样可以省略空间

删除是通过wx.cloud.deleteFileAPI, 需要传入fileList属性, 表示删除的集合, 可以删除一条或者多条

async onDeleteTap() {// 1.删除云存储中的内容const res = await wx.cloud.deleteFile({  fileList: [    "cloud://cloud1-0g75nm8011e44998.636c-cloud1-0g75nm8011e44998-1313411765/1661570752252_open_xx .png",    "cloud://cloud1-0g75nm8011e44998.636c-cloud1-0g75nm8011e44998-1313411765/image/1661571031747_open_xx .png"  ]})  console.log(res);}

获取临时链接

为什么要获取临时链接?

我们将文件上传到云存储后,可以通过fileID在小程序中直接访问;

但是,如果我们希望在小程序以外的地方访问(比如浏览器、手机端),那么fileID是不可以的;

这个时候,我们可以通过获取临时链接,该链接可以在小程序以外访问;

获取临时链接通过wx.cloud.getTempFileURLAPI, 和删除文件一样, 可以一次获取多个文件的临时链接, 因此传入的属性是fileList

async onTempFileTap() {  const res = await wx.cloud.getTempFileURL({    fileList: [      "cloud://cloud1-0g75nm8011e44998.636c-cloud1-0g75nm8011e44998-1313411765/image/1661572611027_open_xx .png"    ]  })  console.log(res);}

注意, 文件链接有效期为两个小时

来源地址:https://blog.csdn.net/m0_71485750/article/details/126556472

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯