1、云存儲
??我們直到，云開發(fā)控制臺更多的是對項(xiàng)目中的初始文件的操作管理，例如項(xiàng)目的Logo圖片可以通過云開發(fā)控制臺提起上傳到云端。項(xiàng)目在執(zhí)行的過程中也會涉及文件的操作，例如用戶上傳圖片的操作，這時就需要用到云開發(fā)存儲API。
??小程序云開發(fā)提供了一系列存儲操作API，有uploadFile()文件上傳接口、downloadFile()下載文件接口、deleteFile()刪除文件接口和getTempFileURL()換取臨時鏈接接口。
??wx.cloud.uploadFile()接口的參數(shù)列表如下所示。如果采用callback風(fēng)格，調(diào)用回調(diào)函數(shù)success、fail、complete中的任何一個，則會返回一個UploadTask對象(封裝返回信息的對象)，通過UploadTask對象可監(jiān)聽上傳事件。
| 字段 | 說明 | 數(shù)據(jù)類型 | 默認(rèn)值 | 必填 |
|---|---|---|---|---|
| cloudPath | 云存儲路徑，命名限制見文件名命名限制 | String | - | Y |
| filePath | 要上傳文件資源的路徑 | String | - | Y |
| config | 配置 | Object | - | N |
| success | 成功回調(diào) | |||
| fail | 失敗回調(diào) | |||
| complete | 結(jié)束回調(diào) |
config 對象定義
| 字段 | 說明 | 數(shù)據(jù)類型 |
|---|---|---|
| env | 使用的環(huán)境 ID，填寫后忽略 init 指定的環(huán)境 | String |
success 返回參數(shù)
| 字段 | 說明 | 數(shù)據(jù)類型 |
|---|---|---|
| fileID | 文件 ID | String |
| statusCode | 服務(wù)器返回的 HTTP 狀態(tài)碼 | Number |
| errMsg | 錯誤信息，格式 uploadFile:ok | String |
fail 返回參數(shù)
| 字段 | 說明 | 數(shù)據(jù)類型 |
|---|---|---|
| errCode | 錯誤碼 | Number |
| errMsg | 錯誤信息，格式 uploadFile:fail msg | String |
返回值
??如果請求參數(shù)中帶有 success/fail/complete 回調(diào)中的任一個，則會返回一個 UploadTask 對象，通過 UploadTask 對象可監(jiān)聽上傳進(jìn)度變化事件，以及取消上傳任務(wù)。
2、云存儲上傳文件示例
2.1 wx.cloud.uploadFile()接口測試
??小程序端uploadFile.wxml代碼如下：
<!--index.wxml-->
<view class="container">
<!-- 用戶 openid -->
<view class="userinfo">
<button
open-type="getUserInfo"
bindgetuserinfo="onGetUserInfo"
class="userinfo-avatar"
style="background-image: url({{avatarUrl}})"
></button>
<view>
<button class="userinfo-nickname" bindtap="onGetOpenid">點(diǎn)擊獲取 openid</button>
</view>
</view>
<!-- 上傳圖片 -->
<view class="uploader">
<view class="uploader-text" bindtap="doUpload">
<text>上傳圖片</text>
</view>
<view class="uploader-container" wx:if="{{imgUrl}}">
<image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
</view>
</view>
</view>
??uploadFile.js
//index.js
const app = getApp()
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: ''
},
onLoad: function() {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
},
// 上傳圖片
doUpload: function () {
// 選擇圖片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
console.log(res)
wx.showLoading({
title: '上傳中',
})
const filePath = res.tempFilePaths[0]
var timestamp = (new Date()).valueOf();//新建日期對象并變成時間戳
wx.cloud.uploadFile({
cloudPath: "img/"+timestamp+".jpg", // 上傳至云端的路徑
filePath: filePath, // 小程序臨時文件路徑
success: res => {
console.log('[上傳文件] 成功：', res)
app.globalData.fileID = res.fileID
app.globalData.cloudPath = cloudPath
app.globalData.imagePath = filePath
wx.navigateTo({
url: '../storageConsole/storageConsole',
})
},
fail: e => {
console.error('[上傳文件] 失?。?, e)
wx.showToast({
icon: 'none',
title: '上傳失敗',
})
},
complete: () => {
wx.hideLoading()
}
})
},
fail: e => {
console.error(e)
}
})
},
})
??代碼講解：本例先調(diào)用了
wx.chooseImage()接口選擇一幅圖片，然后調(diào)用wx.cloud.uploadFile()接口上傳圖片到云端。cloudPath字段是上傳文件在云端的文件名字，為了不重復(fù)，這里采用了當(dāng)前時間戳來命名云端文件名。filePath字段是本地文件的路徑，它的值取wx.chooseImage()接口的回調(diào)參數(shù)res.tempFilePaths[0]。
??示例效果如下：
??點(diǎn)擊上傳圖片，并選擇一張圖片上傳。
??上傳完畢后取云開發(fā)控制臺中查看是否上傳成功
??上傳成功，沒有任何的問題。
2.2 其他接口
??wx.cloud.downloadFile()接口從云存儲空間下載文件的示例代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-487359.html
wx.cloud.downloadFile({
fileID: 'a7xzcb',
success: res => {
// get temp file path
console.log(res.tempFilePath)
},
fail: err => {
// handle error
}
})
??deleteFile(fileList: string[])接口刪除云端文件的示例代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-487359.html
wx.cloud.deleteFile({
fileList: ['a7xzcb'],
success: res => {
// handle success
console.log(res.fileList)
},
fail: err => {
// handle error
},
complete: res => {
// ...
}
})
到了這里，關(guān)于微信小程序云存儲(文件上傳到云端)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
