1. 程式人生 > >小程式上傳圖片快取到本地

小程式上傳圖片快取到本地

今日寫小程式上傳圖片時遇到了點困難,圖片上傳到介面儲存到資料庫,用tp5直接接收name傳參進行正常的上傳檔案操作就行,但是如何讓小程式上傳的圖片在重新整理頁面之後還能繼續存在呢,這問題著實讓我苦惱了一陣子,最後終於在朋友的提醒下成功了,哈哈哈哈
解決辦法:
用小程式的資料快取介面 wx.setStorageSync(KEY,DATA) 存到本地快取,然後頁面載入的時候用 wx.getStorageSync(KEY) 取出來就可以啦
下面上程式碼

 //選擇頭像
    wx.chooseImage({
      count: 1,
      sizeType: ['original'
, 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success: function(res) { // console.log(res) var filepath = res.tempFilePaths // console.log(filepath) // 上傳頭像 wx.uploadFile({ url: getApp().data.url + 'member/imgVipbaseInfo?openid='
+wx.getStorageSync('openid'),//這是往後端傳參調介面將圖片插入資料庫的 filePath: filepath[0],//要上傳檔案的資源路徑 name: 'photo',//檔案對應的 key , 開發者在伺服器端通過這個 key 可以獲取到檔案二進位制內容 success: function(res) { // console.log(res) //下載到本地 wx.downloadFile({ url: filepath[0],//檔案資源路徑
success:function(res){ var tempFilePaths = res.tempFilePath wx.saveFile({ tempFilePath: tempFilePaths,//需要儲存的檔案的臨時路徑 success: function (res) { var savedFilePath = res.savedFilePath //console.log(savedFilePath) wx.setStorageSync('img', savedFilePath);//將圖片路徑快取到本地 that.setData({ photo: wx.getStorageSync('img')//成功後重新賦值img,之後在頁面重新載入的時候再賦值一次就ok啦 }) } }) } }) // console.log(that) if (res.statusCode==200){ wx.showToast({ title: '上傳成功', icon: 'success', duration: 1500 }) }else{ wx.showToast({ title: '上傳失敗', icon: 'none', duration: 1500 }) } }, fail: function(res) {}, complete: function(res) {}, }) }, fail: function(res) {}, complete: function(res) {}, })