uniCloud基础入门(二)---云存储基础

代码哈士奇 发表于 2021/05/02 14:10:11 2021/05/02
【摘要】 云开发系列视频 https://www.bilibili.com/video/BV1eK4y1p7Qe我们之前已经讲了 云函数的使用服务空间创建以及部署一个云函数云函数练习—整合百度ai图像识别SDK这次我们来一起学习 云存储的使用文档地址 https://uniapp.dcloud.io/uniCloud/storage特别注意 阿里云服务空间和腾讯云服务空间有区别,阿里云的上传完文件直接...

云开发系列
视频 https://www.bilibili.com/video/BV1eK4y1p7Qe
我们之前已经讲了 云函数的使用
服务空间创建以及部署一个云函数
云函数练习—整合百度ai图像识别SDK
这次我们来一起学习 云存储的使用
文档地址 https://uniapp.dcloud.io/uniCloud/storage
特别注意 阿里云服务空间和腾讯云服务空间有区别,阿里云的上传完文件直接返回文件地址,腾讯云返回fileID 可以换取文件地址

云存储的使用

视频

云开发系列

云存储基础

服务空间的云存储

服务空间 https://unicloud.dcloud.net.cn/home
在这里插入图片描述

上传文件

https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile

选择文件/图片/其它

如果你要上传文件/图片 首先要选择文件/图片 获取临时地址

选择文件

https://uniapp.dcloud.io/api/media/file?id=choosefile
在这里插入图片描述

选择图片

https://uniapp.dcloud.io/api/media/image?id=chooseimage
在这里插入图片描述

选择视频

https://uniapp.dcloud.io/api/media/video?id=choosevideo
在这里插入图片描述

选择图片或视频

https://uniapp.dcloud.io/api/media/video?id=choosemedia
在这里插入图片描述

使用

这里举例为上传图片

选择图片

我们先来看看选择照片后的打印结果
由于count我们设置成了1 所以每次最多只能选一个

uni.chooseImage({
	count:1,
	sizeType: ['compressed'], //指定压缩图
	success:function(res){
		console.log(res)
	}
}) 

在这里插入图片描述如果是选择多个照片count为5 每次最多选择5个 情况如下

uni.chooseImage({
	count:5,
	sizeType: ['compressed'], //指定压缩图
	success:function(res){
		console.log(res)
	}
}) 

在这里插入图片描述

上传图片

如果只有一张图片
很显然 我们需要拿到
res.tempFilePaths[0]
多张就要遍历res.tempFilePaths
在这里插入图片描述

上传图片
onUploadProgress为上传进度回调
vm.presents 为进度百分比 根据这个可以加个进度条

let path = res.tempFilePaths[0]
uniCloud.uploadFile({
	filePath: path,
	cloudPath: 'dmhsq.jpg',
	onUploadProgress: function(progressEvent) {
		console.log(progressEvent);
		vm.presents = Math.round(
			(progressEvent.loaded * 100) / progressEvent.total
		);
	},
	success: function(res) {
		console.log(res)
		uni.showToast({
			icon: 'none',
			title: '上传成功',
			duration: 1500
		})
	}
}); 

我们选择了一张图片上传
在这里插入图片描述
在这里插入图片描述
可以看到这里上传成功了
在这里插入图片描述

获取图片

我们拿到了fileId 可以获取图片的临时下载地址
https://uniapp.dcloud.io/uniCloud/storage?id=gettempfileurl

let purl = res.fileID;
uni.showToast({
	icon: 'none',
	title: '上传成功',
	duration: 1500
})
uniCloud.getTempFileURL({
	fileList: [purl],
	success: function(res) {
		console.log(res)
	}
}) 

我们看一下 获取图片临时地址的结果
在这里插入图片描述文档中这样说 所以我们拿 tempFileURL
在这里插入图片描述我们改造下 页面代码
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

看下效果

在这里插入图片描述

直接选择上传

文档给出了
在这里插入图片描述

uniCloud.chooseAndUploadFile({
	type: 'image',
	success: function(res) {
		console.log(res)
	}
}) 

练习(实现个人用户的头像上传以及更换)

我们一样会像上一篇一样 练习一次云存储的使用

实现个人用户的头像上传以及更换

谢谢阅读 练习见

大学之道亦在自身,努力学习,热血青春

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。