思路及代碼
1.使用 chooseImage 獲取到圖片 並且在data中保存其生成的零時路徑
Page({
data: {
imgs:[],
},
uploadImage(){
let _this = this
wx.chooseImage({
count:3,
success(res){
_this.setData({imgs:res.tempFilePaths})
}
})
},
})
2.在頁面中 迭代這個數組 得到初步的預覽效果
<image data-url="{{item}}" wx:for="{{ imgs }}" wx:key="index" src="{{item}}" class="img1" />
3.通過微信自己的接口 previewImage 實現預覽效果
<image bind:tap="yulan" data-url="{{item}}" wx:for="{{ imgs }}" wx:key="index" src="{{item}}" class="img1" />
yulan(e){
let url = e.currentTarget.dataset.url
let _this = this
wx.previewImage({
urls:_this.data.imgs,
current:url,
success(res){
console.log(res)
}
})
},
點擊圖片的預覽效果
4.通過Promise多圖上傳服務器
<button class="btn1" bind:tap="tijiao">立即提交</button>
tijiao(){
new Promise(resolve => {
let uploadImg = [];
let _this = this
this.data.imgs.some(item => {
wx.uploadFile({
url:'http://xxxxx', //服務器地址
filePath:item,name:'File',success(res){
uploadImg.push(JSON.parse(res.data).data.File)
uploadImg.length === _this.data.imgs.length?resolve(uploadImg):null
}})
})
}).then(data => {
})
})
},
迭代存放圖片路徑的數組(假設A),依次上傳,每次上傳成功後將 服務器返回的圖片在服務器的路徑 push到另一個(假設)B數組中,當B的長度和A相等時,所有圖片上傳完成,此時執行 Promise 的 resolve 判定,執行 then 之後的操作。
不知道 Promise 用法的,這邊走 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise