小程式上傳圖片快取到本地
阿新 • • 發佈:2019-02-04
今日寫小程式上傳圖片時遇到了點困難,圖片上傳到介面儲存到資料庫,用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) {},
})