我們之前已經講了 云函式的使用
云開發—uniapp云開發(一)—服務空間創建以及部署一個云函式
云開發—uniapp云開發云函式練習—整合百度ai影像識別SDK
這次我們來一起學習 云存盤的使用
檔案地址 https://uniapp.dcloud.io/uniCloud/storage
云存盤的使用
- 云存盤基礎
- 服務空間的云存盤
- 上傳檔案
- 選擇檔案/圖片/其它
- 選擇檔案
- 選擇圖片
- 選擇視頻
- 選擇圖片或視頻
- 使用
- 選擇圖片
- 上傳圖片
- 獲取圖片
- 直接選擇上傳
- 練習(實作個人用戶的頭像上傳以及更換)
云存盤基礎
服務空間的云存盤
服務空間 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)
}
})
練習(實作個人用戶的頭像上傳以及更換)
我們一樣會像上一篇一樣 練習一次云存盤的使用
實作個人用戶的頭像上傳以及更換
謝謝閱讀 練習見
朋友，實不相瞞，我想給你送一份真摯的新年禮物，趁新年伊始快來入駐騰訊云+社區，和我一起做技術分享，在這里我不僅識訓了滿滿的禮物，還獲得了認同感和成就感，技術需要傳播薪種，而我們都是火種的傳播人，朋友，我們山頂見，期待在云端看見你！
https://cloud.tencent.com/developer/support-plan?invite_code=guxjsio9ud3l
前端：js入門 vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/259779.html
標籤：其他
上一篇：Mybatis延遲加載策略