gallery.gif數(shù)據(jù):依賴接口wx.upload、chooseImage與preview數(shù)據(jù)請求通過LeanCloud完成圖片選擇:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject前端處理:1.保存images數(shù) ...
gallery.gif
數(shù)據(jù):
依賴接口wx.upload、chooseImage與preview
數(shù)據(jù)請求通過LeanCloud完成
圖片選擇:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject
前端處理:
1.保存images數(shù)組為已選擇圖片
2.選擇了更多圖片后concat數(shù)組
3.預覽圖集
4.leancloud上傳多圖,目測順序一致
js代碼
const AV = require('../../../utils/av-weapp.js')var that;
Page({ data: { images: [], uploadedImages: [], imageWidth: getApp().screenWidth / 4 - 10
}, onLoad: function (options) {
that = this; var objectId = options.objectId; console.log(objectId);
}, chooseImage: function () { // 選擇圖片
wx.chooseImage({ sizeType: ['compressed'],
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths; console.log(tempFilePaths);
that.setData({ images: that.data.images.concat(tempFilePaths)
});
}
})
}, previewImage: function () { // 預覽圖集
wx.previewImage({ urls: that.data.images
});
}, submit: function () { // 提交圖片,事先遍歷圖集數(shù)組
that.data.images.forEach(function (tempFilePath) { new AV.File('file-name', { blob: { uri: tempFilePath,
},
}).save().then( // file => console.log(file.url())
function(file) { // 先讀取
var uploadedImages = that.data.uploadedImages;
uploadedImages.push(file.url()); // 再寫入
that.setData({ uploadedImages: uploadedImages
}); console.log(uploadedImages);
}
).catch(console.error);
});
wx.showToast({ title: '評價成功', success: function () {
wx.navigateBack();
}
});
}, delete: function (e) { var index = e.currentTarget.dataset.index; var images = that.data.images;
images.splice(index, 1);
that.setData({ images: images
});
}
})
wxml代碼
<view class="gallery">
<view class="item" wx:for="{{images}}" wx:key="">
<image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src=" {{item}}" bindtap="previewImage" mode="aspectFill" />
<!-- 刪除按鈕 -->
<view class="delete" bindtap="delete" data-index="{{index}}"><image style="left: {{imageWidth / 2 - 10}}px;" src="/images/icon_delete.png" /></view>
</view>
<view class="item">
<image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src="/images/icon_add.png" class="button-upload" bindtap="chooseImage" />
</view></view><button type="primary" bindtap="submit">提交</button>
wxss代碼
/*畫廊*/.gallery { /*margin-bottom: 100rpx;*/
display: flex; justify-content: flex-start; flex-wrap: wrap;
}/*每張圖片所占容器*/.item { position: relative; margin: 5px;
}/*刪除按鈕*/.delete { position: absolute; height: 20px; bottom: 0; width: 100%; background: #ccc; opacity: .8;
}.delete image { position: absolute; width: 20px; height: 20px;
}
源碼下載:http://git.oschina.net/dotton/lendoo-wx,本文涉及代碼存于/pages/member/evalute文件夾中。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務