unicloud云开发---uniapp云开发(二)---云存储基础

雨点打透心脏的1/2处 2022-10-29 12:25 165阅读 0赞

> 云开发系列

> 我们的视频教程(免费)链接为[https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/][https_static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com]  
> 我们之前已经讲了 云函数的使用  
> [云开发—uniapp云开发(一)—服务空间创建以及部署一个云函数][uniapp]  
> [云开发—uniapp云开发云函数练习—整合百度ai图像识别SDK][uniapp_ai_SDK]  
> 这次我们来一起学习 云存储的使用  
> 文档地址 [https://uniapp.dcloud.io/uniCloud/storage][https_uniapp.dcloud.io_uniCloud_storage]

### 云存储的使用 ###

*  视频
 *  云存储基础
 *   *  服务空间的云存储
     *  上传文件
     *   *  选择文件/图片/其它
         *   *  选择文件
             *  选择图片
             *  选择视频
             *  选择图片或视频
         *  使用
         *   *  选择图片
             *  上传图片
             *  获取图片
     *  直接选择上传
 *  练习(实现个人用户的头像上传以及更换)

# 视频 #

云开发系列

# 云存储基础 #

## 服务空间的云存储 ##

服务空间 [https://unicloud.dcloud.net.cn/home][https_unicloud.dcloud.net.cn_home]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]

## 上传文件 ##

[https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile][https_uniapp.dcloud.io_uniCloud_storage_id_uploadfile]

### 选择文件/图片/其它 ###

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

#### 选择文件 ####

[https://uniapp.dcloud.io/api/media/file?id=choosefile][https_uniapp.dcloud.io_api_media_file_id_choosefile]  
![在这里插入图片描述][20210214162335166.png]

#### 选择图片 ####

[https://uniapp.dcloud.io/api/media/image?id=chooseimage][https_uniapp.dcloud.io_api_media_image_id_chooseimage]  
![在这里插入图片描述][20210214162543979.png]

#### 选择视频 ####

[https://uniapp.dcloud.io/api/media/video?id=choosevideo][https_uniapp.dcloud.io_api_media_video_id_choosevideo]  
![在这里插入图片描述][20210214162557512.png]

#### 选择图片或视频 ####

[https://uniapp.dcloud.io/api/media/video?id=choosemedia][https_uniapp.dcloud.io_api_media_video_id_choosemedia]  
![在这里插入图片描述][20210214162621332.png]

### 使用 ###

这里举例为上传图片

#### 选择图片 ####

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

#### 上传图片 ####

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

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

我们选择了一张图片上传  
![在这里插入图片描述][20210214164713948.gif]  
![在这里插入图片描述][20210214164831290.png]  
可以看到这里上传成功了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]

#### 获取图片 ####

我们拿到了fileId 可以获取图片的临时下载地址  
[https://uniapp.dcloud.io/uniCloud/storage?id=gettempfileurl][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)
    	}
    })

我们看一下 获取图片临时地址的结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]文档中这样说 所以我们拿 tempFileURL  
![在这里插入图片描述][20210214165721828.png]我们改造下 页面代码  
![在这里插入图片描述][20210214165859319.png]![在这里插入图片描述][20210214165911705.png]

![在这里插入图片描述][20210214170030777.png]

看下效果

![在这里插入图片描述][20210214170114974.gif]

## 直接选择上传 ##

文档给出了  
![在这里插入图片描述][20210214170253766.png]

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

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

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

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

谢谢阅读 练习见

朋友，实不相瞒，我想给你送一份真挚的新年礼物，趁新年伊始快来入驻腾讯云+社区，和我一起做技术分享，在这里我不仅收获了满满的礼物，还获得了认同感和成就感。技术需要传播薪种，而我们都是火种的传播人。朋友，我们山顶见，期待在云端看见你！  
[https://cloud.tencent.com/developer/support-plan?invite\_code=guxjsio9ud3l][https_cloud.tencent.com_developer_support-plan_invite_code_guxjsio9ud3l]

前端：js入门 vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 1] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910

有问题可以下方留言，看到了会回复哦

[https_static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com]: https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/
[uniapp]: https://blog.csdn.net/qq_42027681/article/details/113746528
[uniapp_ai_SDK]: https://blog.csdn.net/qq_42027681/article/details/113764664
[https_uniapp.dcloud.io_uniCloud_storage]: https://uniapp.dcloud.io/uniCloud/storage
[https_unicloud.dcloud.net.cn_home]: https://unicloud.dcloud.net.cn/home
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221024/586875269bc94af38a38b2ad8b39a8f9.png
[https_uniapp.dcloud.io_uniCloud_storage_id_uploadfile]: https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile
[https_uniapp.dcloud.io_api_media_file_id_choosefile]: https://uniapp.dcloud.io/api/media/file?id=choosefile
[20210214162335166.png]: /images/20221024/7eafd3e8fd9a4e718939880111889d1b.png
[https_uniapp.dcloud.io_api_media_image_id_chooseimage]: https://uniapp.dcloud.io/api/media/image?id=chooseimage
[20210214162543979.png]: /images/20221024/df42ac56668c41feb29e1855211248e8.png
[https_uniapp.dcloud.io_api_media_video_id_choosevideo]: https://uniapp.dcloud.io/api/media/video?id=choosevideo
[20210214162557512.png]: /images/20221024/12c711ad3a7b4d62ad30f8a95e6f2f9b.png
[https_uniapp.dcloud.io_api_media_video_id_choosemedia]: https://uniapp.dcloud.io/api/media/video?id=choosemedia
[20210214162621332.png]: /images/20221024/be43fd8c547b45bcb673bddd1f247965.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/d74c10f5a6294fe7a2112057fd01897f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221024/23cb7fffdb614bbd8f5f70e8f511ae37.png
[20210214163558799.png]: /images/20221024/4436962f6beb450ca462904cbf27db8d.png
[20210214164713948.gif]: /images/20221024/7f0ef179660740f0a269be715743ce26.png
[20210214164831290.png]: /images/20221024/959f187072a44ee1b4b6e0bde1498145.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: /images/20221024/0c6149622eae4a1d9b7d3c2e318548c4.png
[https_uniapp.dcloud.io_uniCloud_storage_id_gettempfileurl]: https://uniapp.dcloud.io/uniCloud/storage?id=gettempfileurl
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: /images/20221024/56a53ca4925a489892a6f863131dce03.png
[20210214165721828.png]: /images/20221024/dd1f4fc66c684f789b0f669ec454ec92.png
[20210214165859319.png]: https://img-blog.csdnimg.cn/20210214165859319.png
[20210214165911705.png]: /images/20221024/15d72057be8e407d9a57f0eea5e9158e.png
[20210214170030777.png]: /images/20221024/7f20eab8303e466d97f7de6a2d8e046b.png
[20210214170114974.gif]: /images/20221024/54bb6631bd62466b98e54b846a8daf7f.png
[20210214170253766.png]: /images/20221024/eb20debd07684aaf919fa0f29992cedb.png
[https_cloud.tencent.com_developer_support-plan_invite_code_guxjsio9ud3l]: https://cloud.tencent.com/developer/support-plan?invite_code=guxjsio9ud3l
[Link 1]: https://buwenbuhuo.blog.csdn.net/