当前位置:首页 > 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控制台-云存储-权限中编写规则。示例规则限制用户只能读写自己的目录:

uniapp使用云存储

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

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

标签: uniapp
分享给朋友:

相关文章

uniapp如何赋值

uniapp如何赋值

uniapp 赋值方法 在 uniapp 中,赋值操作可以通过多种方式实现,具体取决于数据类型和场景。 数据绑定赋值 在模板中使用 {{}} 进行数据绑定,通过修改 data 中的值实现动态更新。…

任务 uniapp

任务 uniapp

uniapp 简介 Uniapp 是一款基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布(如微信小程序、H5、App、快应用等)。其核心优势在于代码复用率高,开发者可以通过一套代码适配多个…

uniapp gpio

uniapp gpio

在 uniapp 中直接操作 GPIO(通用输入输出)通常需要依赖原生平台的硬件接口,因为 uniapp 本身是基于前端技术的跨平台框架,不直接提供硬件访问能力。以下是实现 GPIO 控制的几种方法:…

uniapp 日志

uniapp 日志

uniapp 日志管理方法 uniapp本身没有内置日志系统,但可以通过以下方式实现日志记录功能: 使用console.log输出日志 开发阶段可以直接使用console.log()、console…

uniapp有用

uniapp有用

Uniapp 的优势 Uniapp 是一款基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布,适用于 iOS、Android、Web、小程序等多个平台。其核心优势包括: 跨平台兼容性:…

uniapp 销售日报

uniapp 销售日报

实现销售日报功能的步骤 数据收集与整理 销售日报需要收集每日销售数据,包括销售额、订单数量、商品类别等。数据可以从后端API获取或本地数据库存储。使用uni.request调用接口获取数据,确保数据结…