当前位置:首页 > uni-app

uniapp使用云存储

2026-02-06 08:06:34uni-app

使用uniCloud云存储

uniapp通过uniCloud提供云存储功能,支持文件上传、下载、删除等操作。需先开通uniCloud服务并完成初始化配置。

在项目manifest.json中勾选uniCloud模块,确保HBuilderX已安装uniCloud插件。项目根目录需创建uniCloud文件夹,存放云函数和云存储配置。

配置云存储环境

登录uniCloud官网控制台,创建服务空间并绑定项目。在服务空间内启用云存储功能,设置存储权限和域名。权限分为公有读、私有读写等,根据业务需求选择。

配置安全域名防止盗链,在uniCloud控制台-云存储-设置中添加合法域名。小程序端需额外在微信公众平台配置downloadFile合法域名。

上传文件到云存储

前端通过uni.uploadFile或uniCloud.uploadFile上传文件。uni.uploadFile适用于全端兼容,uniCloud.uploadFile为专用API。

// 使用uniCloud.uploadFile
uniCloud.uploadFile({
  filePath: filePath, // 本地文件路径
  cloudPath: 'user/avatar.jpg', // 云存储路径
  onUploadProgress: function(progressEvent) {
    console.log(progressEvent);
  }
}).then(res => {
  console.log(res.fileID); // 返回文件唯一ID
});

云存储路径建议按业务分类,如/user/uid//product/img/。大文件需分片上传,通过配置chunkSize参数优化性能。

下载和访问文件

通过fileID获取文件临时访问链接,有效期默认2小时。私有文件需先调用接口获取临时URL。

uniCloud.downloadFile({
  fileID: 'cloud://example.jpg',
  success: res => {
    console.log(res.tempFilePath);
  }
});

公有读文件可直接通过CDN访问,URL格式为https://xxx.tcb.qcloud.la/fileID。动态调整图片尺寸可在URL后添加?imageView2/2/w/200参数。

管理云存储文件

删除文件需调用deleteFile接口,需注意权限控制。批量操作建议使用云函数封装。

uniCloud.deleteFile({
  fileList: ['cloud://a.jpg','cloud://b.jpg']
}).then(res => {
  console.log(res.deletedFileList);
});

文件列表查询通过getTempFileURL实现,支持分页筛选。云函数端可使用SDK进行更复杂管理:

const cloud = require('wx-server-sdk')
cloud.init()
const result = await cloud.getTempFileURL({
  fileList: ['cloud://test.jpg']
})

安全与权限控制

通过自定义安全规则限制访问,在uniCloud控制台-云存储-权限中编写规则。示例规则限制用户只能读写自己的目录:

{
  "read": "auth.uid == resource.openid",
  "write": "auth.uid == resource.openid"
}

敏感操作应放在云函数中处理,前端仅传递fileID。结合uni-id实现用户身份验证,确保数据隔离。定期清理过期文件,通过生命周期管理自动归档。

uniapp使用云存储

标签: uniapp
分享给朋友:

相关文章

uniapp使用npm

uniapp使用npm

uniapp中使用npm的方法 uniapp支持通过npm安装和管理第三方依赖包,以下是具体操作步骤: 安装Node.js环境 确保本地已安装Node.js(建议使用LTS版本),安装后会自动包含…

uniapp实现支付功能

uniapp实现支付功能

支付功能实现概述 在UniApp中实现支付功能通常需要对接第三方支付平台(如微信支付、支付宝支付等)。以下是基于微信支付和支付宝支付的通用实现流程。 微信支付实现步骤 1. 配置支付权限 在微信开…

uniapp样式库

uniapp样式库

uniapp 常用样式库推荐 uView UI uView 是专为 uniapp 设计的多端兼容 UI 框架,提供丰富的组件和工具类。支持 Vue3 组合式 API,内置主题定制功能,常用于快速构建企…

uniapp模板库

uniapp模板库

uniapp模板库推荐 官方模板库 uni-app官方提供多个模板,涵盖电商、社交、新闻等多个领域。这些模板可直接在HBuilderX中通过新建项目选择,包含基础结构和常用功能模块,适合快速启动项目。…

uniapp打包

uniapp打包

uniapp打包步骤 H5平台打包 在项目根目录运行以下命令生成H5资源文件: npm run build:h5 打包完成后,文件默认输出到/dist/build/h5目录,可直接部署到Web服务…

uniapp切片

uniapp切片

uniapp 切片实现方法 在 uniapp 中实现切片功能通常指的是对图片或数据进行分割处理。以下是几种常见的切片实现方式: 图片切片展示 通过 CSS 和 JavaScript 实现图片的网格化…