# 云存储
云开发为开发者提供了存储空间、将文件上传到云端存储空间内以及带权限的云端文件下载能力,开发者可以使用云开发控制台或使用 SDK 调用接口来使用存储功能。
- 云开发默认支持CDN加速,并提供免费CDN域名。
- 每一个上传到云开发的文件都有一个全网唯一的fileID,使用fileID可以更加安全便捷的访问文件。
- 部分小程序的组件(如image、video、cover-image等),支持传入云文件的 fileID。
# 课程学习
训练营所给学习指导:
# 阶段要求
请在任务一页面中添加一个logo图片,使用云开发云存储来存放图片。需要注意使用gettempurl来获取http路径,图片的fileId在集合name文档中以logo命名。
在任务二页面中,添加一个file输入框,并附带一个上传按钮,实现logo图片的更新。在上传时,需要有展示实时上传进度。
# 使用云存储
在客户端使用云存储,我是通过客户端JS实现图片的获取和上传修改的,没有使用云函数。
# 作业思路
修改
index.html
文件:添加一个img标签来放置图片See More
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>腾讯云开发</title> <script src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.3/cloudbase.full.js"></script> </head> <body> <div style="text-align: center;margin-top: 10%;"> <img id="logo"> <h1>欢迎来到<span id="name"></span>的网站</h1> <p id="title"></p> <p>你是第<span id="order"></span>位访问者</p> <p>共有<span id="number"></span>位访问者</p> </div> </body> <script src="./asset/index.js"></script> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19修改
index.js
文件:从云存储冲读取文件See More
img标签加载图片需要src地址,而获取此地址的方法是getTempFileURL,而其需要一个参数,即要下载的文件 ID 组成的数组。因此我们需要将图片上传到云存储后获得的fileid存储到数据库中,从而方便我们在之后,对文件进行读取。
const app = cloudbase.init({ env: "环境ID" }); const auth = app.auth(); const db = app.database(); let uid = null // 匿名登录 async function login(){ await auth.anonymousAuthProvider().signIn().then((res)=>{ auth.getLoginState().then(loginState=>{ uid = loginState.user.uid db.collection('user').where({ _id:uid }).get().then(res => { if(res.data.length >0 ){ console.log('已存在!') }else{ db.collection('user').add({ _id:loginState.user.uid, indue:db.serverDate() }) } }) // 获取网站名字 db.collection('name').where({ _id:"name" }).get().then(res => { document.getElementById("name").innerHTML=res.data[0].value; }) // 获取积极的话 db.collection('title').get().then(res => { // 随机获取一条 let index = Math.floor(Math.random() * (res.data.length) ) document.getElementById("title").innerHTML=res.data[index].value; }) setTimeout(()=>{ // 获取用户是第几位访问者 db.collection('user').orderBy("indue","asc").get().then(res => { console.log(res.data) for(let i =0 ;i<res.data.length;i++){ if(res.data[i]._id === uid){ document.getElementById("order").innerHTML=i+1; } } }) },500) // setTimeout(()=>{ // // 共有访问者 // db.collection('user').count().then( res => { // document.getElementById("number").innerHTML=res.total; // }) // console.log("登录成功!",loginState.user.uid) // },400) // 监听 setTimeout(()=>{ db.collection('user').watch({ onChange: res => { document.getElementById("number").innerHTML=res.docs.length }, onError: function (err) { console.error("数据库监控出现错误~~~", err); } }); },400) db.collection('name').where({ _id:"logo" }).get().then(res => { console.log(res.data[0].logo) // 获取下载链接 app.getTempFileURL({ fileList: [res.data[0].logo] }).then( img => { img.fileList.forEach((el) => { if (el.code === "SUCCESS") { console.log(el.tempFileURL); document.getElementById("logo").src = el.tempFileURL } else { //获取下载链接失败 } }); }); }) }) }).catch((err)=>{ console.log("登录失败",err); }) } login();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89实现更新Logo图片,将上一节中集成响应所返回的HTML中更新按钮绑定相关事件,进行处理,修改集成响应中HTML如下(高亮为本次修改的代码,即changeLogo函数):
See More
<script src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.3/cloudbase.full.js"></script> <body> <div style="text-align: center;margin-top: 5%;"> <input id="name" placeholder="名称name" style="margin-right: 5%;"> <button onclick="changeName()">更新名称</button> <div style="border:3px solid #a9afaf;margin: 5% 10%;"> <div id="list"></div> <p><input id="add" placeholder="名称name" style="margin-right: 5%;"><button onclick="addTitle()">添加</button></p> </div> <input id="file" type="file" accept="image/*"/> <button onclick="changeLogo()">更新图片</button> </div> </body> <script> const app = cloudbase.init({ env: "lime2019-3gbmvzpice4d3b3a" }) const auth = app.auth() const db = app.database() function signInAnonymously() { auth.anonymousAuthProvider().signIn() .then((res)=>{ console.log('登陆成功',res); }) } signInAnonymously() getList() function getList(){ setTimeout(()=>{ console.log('获取title列表') app.callFunction({ name:"list_title" }).then(res => { res = res.result console.log(res) let list = document.getElementById("list") list.innerHTML = "" for(let index in res){ let title = res[index] let listitem = document.createElement('div') // let item = document.createElement('span') item.setAttribute('id',title._id) item.setAttribute('style',"margin-right: 5%;") item.innerText = title.value listitem.appendChild(item) // let itemdel = document.createElement('button') itemdel.setAttribute('onclick','deleteTitle("'+title._id+'")') itemdel.innerText = '删除' listitem.appendChild(itemdel) // 将子模块放入list列表中 list.appendChild(listitem) } }) },500) } function changeName(){ console.log('更新名称开始~~~') app.callFunction({ name:'update_name', data:{ name:'lime' } }).then((res)=> { console.log(res.result) }) } function addTitle(){ console.log('新增励志话语~~~') let title = document.getElementById('add').value app.callFunction({ name:'add_title', data:{ title:title } }).then(res => { console.log(res) document.getElementById('add').value = "" getList() }) } function deleteTitle(id){ console.log('删除励志话语~~~') app.callFunction({ name:'delete_title', data:{ id:id } }).then(res => { console.log(res) getList() }) } function changeLogo(){ console.log('更新图片开始') console.log(document.getElementById("file").files[0].name) app.uploadFile({ cloudPath: document.getElementById("file").files[0].name, filePath: document.getElementById("file").files[0], onUploadProgress: function (progressEvent) { console.log(progressEvent); var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); } }).then((result) => { console.log(result.fileID) app.callFunction({ name:"update_logo", data:{ logo:result.fileID } }).then(res => { console.log(res.result) }) }); } </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126云函数update_logo。实现对所存储logo图片的fileid进行修改,从而实现logo图的修改:
See More
const tcb = require("@cloudbase/node-sdk"); const app = tcb.init({ env:'环境ID' }) const db = app.database() exports.main = async (event, context) => { let {logo} = event let result = await db .collection("name") .where({ _id: "logo", }).update({ logo:logo }) //获取返回的数据结果 return logo,result; };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18