雲開發是騰訊雲提供的雲原生一體化開發環境和工具平臺，為開發者提供高可用、自動彈性擴縮的後端雲服務，可用於雲端一體化開發多種端應用。
開發流程
程式碼引入
在當前頁面的.json 中引入元件
{
"usingComponents": {
"mp-uploader": "weui-miniprogram/uploader/uploader"
}
}程式碼開發
在當前頁面.wxml中編寫上傳元件
<view class="page__bd">
<mp-cells>
<mp-cell>
<mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="4" title="附件上傳" tips="最多可上傳4張照片"></mp-uploader>
</mp-cell>
</mp-cells>
</view>bindfail 圖片上傳失敗的事件，detail為{type, errMsg}，type為1表示圖片超過大小限制，type為2表示選擇圖片失敗，type為3表示圖片上傳失敗。
bindselect 圖片選擇觸發的事件，detail為{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的欄位，contents表示所選的圖片的二進位制Buffer列表
max-count 圖片上傳的個數限制
在當前頁面的.js中編寫
wx.cloud.init({
env: '環境ID',
traceUser: true,
})
formInputChange(e) {
const {
field
} = e.currentTarget.dataset
this.setData({
[`formData.${field}`]: e.detail.value
})
},
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
success: function (res) {
// 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function(e){
wx.previewImage({
current: e.currentTarget.id, // 當前顯示圖片的http連結
urls: this.data.files // 需要預覽的圖片http連結列表
})
},
selectFile(files) {
console.log('files', files)
// 返回false可以阻止某次檔案上傳
},
uplaodFile(files) {
console.log('upload files', files)
console.log('upload files', files)
// 檔案上傳的函式，返回一個promise
return new Promise((resolve, reject) => {
const tempFilePaths = files.tempFilePaths;
//上傳返回值
const that = this;
const object = {};
for (var i = 0; i < tempFilePaths.length; i++) {
let filePath = '',cloudPath = ''
filePath = tempFilePaths[i]
// 上傳圖片
// cloudPath 最好按時間 遍歷的index來排序，避免檔名重複
cloudPath = 'blog-title-image-' + new Date().getTime() + '-' + i + filePath.match(/\.[^.]+?$/)[0]
console.log(filePath)
console.log(cloudPath)
const upload_task = wx.cloud.uploadFile({
filePath,
cloudPath,
success: function(res) {
console.log(res)
// 可能會有好幾個200+的返回碼，表示成功
if (res.statusCode === 200 || res.statusCode === 204 || res.statusCode === 205) {
const url = res.fileID
that.data.files.push(url)
if (that.data.files.length === tempFilePaths.length) {
object.urls = that.data.files;
resolve(object) //這就是判斷是不是最後一張已經上傳了，用來返回，
}
} else {
reject('error')
}
},
fail: function(err) {
console.log(err)
},
conplete: () => {
}
})
}
})
// 檔案上傳的函式，返回一個promise
},
uploadError(e) {
console.log('upload error', e.detail)
},
uploadSuccess(e) {
console.log('upload success', e.detail)
}
});屬性參考文件：https://wechat-miniprogram.gi...
我們關聯雲開發之後，我們即可將照片上傳到資料庫中。
為方便管理，我們可以建立CMS內容管理器。
建立CMS內容管理器
點選雲開發->更多->內容管理 進行開通。
2.雲開發為大家準備了基礎版，為大家提供了一定的免費額度。
設定管理員賬號以及密碼，溫馨提示密碼請牢記（如果忘記密碼可以再內容管理器頁面重置密碼），設定完成後耐心等待系統初始化。
3.根據頁面中提供的訪問地址訪問頁面登陸後，建立新的專案（這裡以花園假期為例）
4.我們在內容模型中建立照片上傳管理（這裡模擬情況為僅需要使用者上傳和記錄使用者id)
建立內容模型
如果需要使用者上傳多張照片，在設定照片欄位時候需要勾選允許使用者上傳多張照片！
5.使用者上傳後我們可以再內容集合，相應模型中檢視。
效果展示
本文由部落格一文多發平臺 OpenWrite 釋出！