微信小程序雲開發之圖片上傳wx.cloud.uploadFile()


頁面按鈕

<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還是其他,都是數組,所以取特定位置的值的時候都需要用下標來取;image

第三個是文件對象數組,其中每個位置存放了文件的臨時地址path和文件的大小size

image

cloudPath: "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000):

路徑文件夾以 “/” 分割 如果”/”前面的文件夾沒有,則會自動創建”/”后面是文件名;

image

success : (uploadres)返回值中有消息、fileID(文件訪問路徑)、和HTTP狀態碼

但是和選擇不一樣的是,每次上傳只能上傳一張圖片,所以每次返回的fileID是文件的訪問路徑是單一的對應圖片訪問路徑

image

至此小程序的雲開發圖片上傳就完成了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM