element ui 组件上传成功之后自己多出来了一个 这是为什么呢？

Question

因为element ui 组件的样式不符合我们的需求 我自己写了一个上传的列表

自己写的列表

我自己写的列表数据是 每当用户跟换
`

    <el-upload
                  class="upload-demo"
                  ref="upload" 
                  drag
                 :on-success="handleAvatarSuccess"
                 :auto-upload="false"
                 :before-remove="beforeRemove"
                  :show-file-list="false"
                 :on-change="handleChange"
                   :on-remove="handleRemove"
                  action="/api/dailyInfo/createDailyInfo"
                  multiple
                  >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>

          handleChange(res, file){ //未上传，但是选择了文件触发
              let status=null;
             this.TitleNameDisplay=true;
             this.TitleName=res.name;
             this.Arraya=file;
             status=this.wenjian(res.name);
            this.FileList.push({
                name:res.name.substring(0, res.name.lastIndexOf(".")),
                status:status,
            })
      },

`
FileList 就是我自己的列表

<ul class="ul_two">
                <li v-for="(item,key) in FileList">
                    <img :src="Image(item)" alt="" />
                    <span>{{item.name}}</span>
                    <i class="el-icon-circle-close-outline" @click="del(item,key)"></i>
                </li>

我现在的问题就是 当点击上传的时候成功之后自己多出来了一个 这是为什么啊 怎么解呢？

Answer 1

注意看文档 on-change不止在添加文件的时候触发 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
你写个判断只在添加文件的时候push就好了

Answer 2

我遇到差不多的问题，我的是因为在上传成功的方法里面写了一个查询图片列表的方法，上传的时候会回删图片，然后在上传就会又跳出来，我给那个查询的方法加一个延迟加载就行了