微信小程序开发使用van-uploader上传多张图片时追加图片覆盖问题--纯前端
微信小程序开发使用van-uploader上传多张图片时追加图片覆盖问题--纯前端1、问题:使用uploader上传图片第一次选择了几张图片后还想再打开相册选择几张图片,后面选择的图片会将之前选择图片覆盖掉。2、原因,暂时不明白,vue中的uploader与这里时一样的用法,可以正常使用,可能时小程序vant组件库的bug吧。3、解决方法4、拓展:图片预览的右上角的删除图片,设置了显示点击却没效果
·
微信小程序开发使用van-uploader上传多张图片时追加图片覆盖问题--纯前端
1、问题:使用uploader上传图片第一次选择了几张图片后还想再打开相册选择几张图片,后面选择的图片会将之前选择图片覆盖掉。
wxml的代码
<!-- 打卡页面 -->
<view class="body">
<!-- 表单 -->
<form bindsubmit="formSubmit">
<!-- 目标 -->
<textarea value="{{desc}}" name="desc" placeholder="写下今日的打卡感受" class="textarea"></textarea>
<van-uploader file-list="{{ images }}" multiple="true" max-count="9" bind:after-read="afterRead" name="images" class="images" bind:delete="deleteImage"/>
<van-button round type="info" size="large" form-type="submit" class="btn">打卡</van-button>
</form>
</view>
js代码
// pages/clock/clock.js
Page({
/**
* 页面的初始数据
*/
data: {
desc: '', //打卡描述
images: [], //配图
formData: {
desc: '士大夫',
images: []
}
},
//点击打卡
formSubmit(e) {
console.log(e.detail);
},
//图片上传回调函数
afterRead(e) {
const _this = this
this.setData({
images: _this.data.images.concat(e.detail.file)
})
console.log(this.data.images);
},
//点击删除图片
deleteImage(e) {
const index=e.detail.index//获取到点击要删除的图片的下标
const _this = this
const deletImageList = this.data.images//用一个变量将本地的图片数组保存起来
deletImageList.splice(index,1)//删除下标为index的元素,splice的返回值是被删除的元素
this.setData({
images: deletImageList
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
第一次选择了四张图片
第二次选择的一张图片将第一次选择的四张图片覆盖了
2、原因,暂时不明白,vue中的uploader与这里时一样的用法,可以正常使用,可能时小程序vant组件库的bug吧。
3、解决方法
在图片上传的回调函数中,把每次上传的图片数组都追加到this.data.images中
4、拓展:图片预览的右上角的删除图片,设置了显示点击却没效果,也要自己手动添加效果,这个的解决方法和上面说的问题差不多,只不过这个是删除。
还有一个小坑要注意,这里用数组的删除方法splice(index,1)index是要删除的数组元素的下标位置,1是要删除元素的个数,这个方法返回的是被删除的元素,不是删除了这个元素之后的数组。具体代码如下。
//点击删除图片
deleteImage(e) {
const index=e.detail.index//获取到点击要删除的图片的下标
const _this = this
const deletImageList = this.data.images//用一个变量将本地的图片数组保存起来
deletImageList.splice(index,1)//删除下标为index的元素,splice的返回值是被删除的元素
this.setData({
images: deletImageList
})
},
5、总结 微信小程序开发从入门到放弃,上手确实不难,真正动起手来处处都是坑!还有微信开放文档真的很不友好,难用的很,还不如csdn来的快。
更多推荐
已为社区贡献2条内容
所有评论(0)