頁面按鈕
<button bindtap="addImg" class="addPng" type="default">添加圖片</button>
js:使用上傳圖片之前肯定要先選擇圖片,所以在此之前要使用wx.chooseImage()選擇圖片,然后在上傳圖片
addImg : function(){
wx.chooseImage({//選擇圖片
count : 1, //規定選擇圖片的數量,默認9
sizeType : [”original”,”compressed”], //規定圖片的尺寸, 原圖/壓縮圖
sourceType : [‘album’,’camera’], //從哪里選擇圖片, 相冊/相機
success : (chooseres)=>{ //接口調用成功的時候執行的函數
//console.log(chooseres);
//選擇圖片后可以在這里上傳
wx.cloud.uploadFile({
cloudPath: "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000),//雲儲存的路徑及文件名
filePath : chooseres.tempFilePaths[0], //要上傳的圖片/文件路徑 這里使用的是選擇圖片返回的臨時地址
success : (uploadres) => { //上傳圖片到雲儲存成功
//console.log(uploadres)
wx.showLoading({ //顯示加載提示框 不會自動關閉 只能wx.hideLoading關閉
title : “圖片上傳中”, //提示框顯示的提示信息
mask : true, //顯示透明蒙層,防止觸摸。為true提示的時候不可以對屏幕進行操作,不寫或為false時可以操作屏幕
success : function () {
wx.hideLoading() //讓提示框隱藏、消失
}
});
},
fail : (err) => {
console.log(err)
}
})
},
fail : (err) => {
console.log(err)
}
})
}
success:(chooseres):
上面的代碼中success的返回值chooseres中有三個參數,第一個就是返回的消息,第二個是圖片的臨時地址列表(數組),不管選擇的數量是1還是其他,都是數組,所以取特定位置的值的時候都需要用下標來取;
第三個是文件對象數組,其中每個位置存放了文件的臨時地址path和文件的大小size
cloudPath: "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000):
路徑文件夾以 “/” 分割 如果”/”前面的文件夾沒有,則會自動創建”/”后面是文件名;
success : (uploadres)返回值中有消息、fileID(文件訪問路徑)、和HTTP狀態碼
但是和選擇不一樣的是,每次上傳只能上傳一張圖片,所以每次返回的fileID是文件的訪問路徑是單一的對應圖片訪問路徑
至此小程序的雲開發圖片上傳就完成了