vue+vant 组件图片上传自定义删除组件

使用vant组件中的图片上传功能，删除不完善，如何自己定义vant中图片上传功能的删除功能；

1、html模板文件：

css:

.van-doc-demo-block__title {margin: 0;font-weight: 400;font-size: .14rem;color: rgba(69,90,100,.6);padding: .35rem .15rem .15rem;}
.upfile-img .weui-uploader__files{margin-left: .1rem;float: left;}
.upfile-img .weui-uploader__input-box{margin-left: .1rem;margin-right: 0;}
.show-img .van-doc-demo-block__title{padding: .05rem .15rem .15rem;}
.show-img .applay-uploadimg .weui-uploader__file{width: .95rem;height: .95rem;}
.showImgs .van-popup{background-color:rgba(0,0,0,0); max-width: 100%;}
.showImgs .van-popup a.close{width: .20rem;height: .20rem;line-height: .20rem;position: absolute;top:0;right: 0;border: 1px solid rgb(238, 238, 238);border-radius: 50%;text-align: center;color: #fff;}
.showImgs .van-popup img{max-width: 100%;}
.partner-popup .van-popup{background-color: rgba(0,0,0,0);}

            <section class="van-doc-demo-section demo-uploader">
                    <h2 class="font-size14 font-black line-height26 ptb-10 pl-10">交易凭证上传：
                        <span class="van-cell__value ml-5 font-size12 font-org">
                            (最多可上传6张)
                        </span>
                    </h2>
                    <!-- 内容图片 -->
                    <div class="van-uploader">
                        <div class="posrev  applay-uploadimg plr-10">
                            <div class="posting-uploader van-uploader__wrapper">
                                <div class="van-uploader__preview" v-for="(item,nn) in fileList" :key="nn">
                                    <div class="van-image van-uploader__preview-image"  style="width: 0.98rem; height: 0.98rem;">
                                        <img :src="item.content"   class="van-image__img" style="object-fit: cover;">
                                    </div>
                                    <i @click="delImg(nn)" class="van-icon van-icon-delete van-uploader__preview-delete"></i>
                                </div>
                                <van-uploader :after-read="onRead" :accept="'image/*'" v-show="fileList.length<=6">
                                    <div class="van-uploader__upload" style="width: 0.98rem; height: 0.98rem;">
                                        <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                        <input multiple="multiple" type="file" accept="image/*" class="van-uploader__input">
                                    </div>
                                </van-uploader>
                            </div>
                        </div>
                        <!-- 图片加载状态弹层 -->
                        <div class="partner-popup text-center">
                            <van-popup v-model="loadings">
                                <div class="text-center">
                                    <demo-block>
                                        <div style="width: 50px;margin: 0 auto 10px;"><van-loading type="spinner" /></div>
                                    </demo-block>
                                    <p class="font-white">图片上传需要一些时间,</p>
                                    <p class="font-white">请耐心等待下吧...</p>
                                </div>
                            </van-popup>
                        </div>
                    </div>
                    <section class="mt-10">
                        <van-field
                                v-model="entity.content"
                                label="备注信息"
                                type="textarea"
                                placeholder="请输入留言"
                                rows="1"
                                autosize
                        ></van-field>
                    </section>
                </section>

2. js定义方法：delImg自定义上传方法，onRead 图片读取上传方法；

  data:{fileList:[],//临时},
 methods:{
    delImg:function (index) {
            // 删除指定下标的图片对象
            if (isNaN(index) || index >= this.fileList.length) {
                return false
            }
            let tmp = []
            for (let i = 0, len = this.fileList.length; i < len; i++) {
                if (this.fileList[i] !== this.fileList[index]) {
                    tmp.push(this.fileList[i]);
                }else{
                    this.$delete(this.entity.img, index);
                }
            }
            this.fileList = tmp;
        },
        onRead:function (file) { // 上传图片到图片服务器
            var that = this;
            let fpb=file;
            that.fileList.push(fpb);
            let url = '/api/uploads/add';
            let params = new FormData();
            params.append('file', file.file);
            let config = {
                headers: { //添加请求头
                    'Content-Type': 'multipart/form-data'
                }
            };
            that.loading = true;
            that.loadings = true;
            that.finished = false;
            axios.post(url, params,config).then(function (res) {
                that.loading = false;
                that.loadings = false;
                that.finished = true;
                if (res.data.code == 0) {
                    that.entity.img.push(res.data.data.url);
                    that.$toast("图片上传成功！");
                } else {
                    that.$toast("图片上传失败，请稍后重试！");
                    that.$toast(res.data.message);
                }
            }).catch(function (res) {
                that.$toast(res.data.message);
            });
        },
}