当前位置:首页 > 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支持多种消息推送方式,包括uniPush、个推、极光推送等。以下为常见实现方案: uniPush(官方推荐) uniapp官方提供的推送服务,基于DClou…

uniapp部署到服务器

uniapp部署到服务器

部署准备 确保本地开发环境已完成项目构建,生成静态文件(H5端为/dist/build/h5目录)。检查服务器环境是否安装Nginx/Apache等Web服务软件,并配置好域名解析。 上传文件 通过…

uniapp关闭侧滑

uniapp关闭侧滑

禁用全局侧滑返回功能 在pages.json中配置全局禁止侧滑返回: { "globalStyle": { "popGesture": "none" } } 禁用单个页面侧滑返回 在…

uniapp判断手机定位是否开启

uniapp判断手机定位是否开启

判断手机定位是否开启的方法 在UniApp中判断手机定位是否开启,可以通过调用原生API或使用第三方插件实现。以下是几种常见的方法: 使用uni.getLocation检测定位状态 通过调用uni.…

uniapp 日志

uniapp 日志

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

uniapp工程

uniapp工程

uniapp工程简介 uniapp是一个基于Vue.js的跨平台开发框架,允许开发者使用一套代码同时生成iOS、Android、H5以及小程序应用。它通过条件编译和平台特性适配,实现多端兼容。 创建…