微信小程序开发使用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来的快。