【Uniapp-Vue3】使用uniCloud.uploadFile上传图片到云存储

具体使用方法在官网:

概述 | uniCloudhttps://doc.dcloud.net.cn/uniCloud/storage/dev.html#clouduploadfile下面以用户上传头像为例:

当我们把button组件中的open-type改为"chooseAvatar"时,就能够选择图片

给这个button添加一个点击事件,并接收到事件对象

在打印出来的对象中可以看到该图片的临时路径,我们只需要把这个临时路径上传到云存储中就行

现在我们用uniCloud.uploadFile将图片上传到云存储:

javascript 复制代码
function onChooseAvatar(e) {
	let avatarUrl = e.detail.avatarUrl;
	uniCloud.uploadFile({
		filePath:avatarUrl,
		cloudPath:""  // 上传到云存储的文件名
	}).then(res=>{
		console.log(res);
	})
}

我们可以在res中获取返回的图片路径,并且在云存储库中能够看到保存的图像,名字为我们定义的cloudPath

注:上传后图像会被压缩

我们所有上传的图像都会被存储在cloudstorage文件夹中

如果我们想把图像上传到其他文件夹下,可以使用如下操作:

首先设置cloudPathAsRealPath:true,然后配置文件路径

我这里把所有上传的图像放在userAvatar文件中,又单独按照日期分类,把当前的时间戳作为图像名。

有效路径是res中的fileID

所以我们可以把数据更新到数据库中

并渲染出来

相关推荐
一份执念6 小时前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
PedroQue9911 小时前
V1.6.1性能优化:高频路径提速与代码精简
前端·uni-app
夏碧笔3 天前
uni-app跨端地图实战:用第三方LBS替代微信平台收费服务
uni-app
用户6990304848757 天前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
ITKEY_7 天前
uniapp微信开发者工具 更改AppID失败 touristappid
uni-app
Geek_Vison8 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
CHB8 天前
HDC2026 演讲实录|AI 驱动的跨端进化:利用 uni-agent 快速构建高性能鸿蒙应用
uni-app·harmonyos
2501_915918418 天前
iOS App性能测试工具的实现方法与优化循环指南
android·ios·小程序·https·uni-app·iphone·webview
斯内普吖9 天前
(开源)高校素拓分管理系统小程序实战指南 基于 Java + SpringBoot + uni-app + Vue + MySQL
java·spring boot·mysql·小程序·uni-app·开源
海阔天空66889 天前
uniapp开启调试模式
uni-app·uniapp开启调试模式