Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

el-image预览大图 删除一张照片后预览无法显示

点击删除按钮后会报错 并且预览无图片显示
image.png
image.png
image.png
代码:

<!-- 添加图片 -->
    <el-upload
      action="#"
      :show-file-list="false"
      :auto-upload="false"
      accept=".png,.jpg,.jpeg"
      :on-change="onImportFileChange"
    >
      <el-button type="primary" icon="el-icon-plus">新增</el-button>
    </el-upload>

    <!-- 显示图片列表 -->
    <div class="add-image-list">
      <div v-for="(imgObj,index) in imgList" :key="imgObj.uid" class="img-content">
        <el-image
            :src="imgObj.url"
            class="image-row"
            :preview-src-list="imgPreview"
          ></el-image>
        <img src="@/assets/img/image_del.png" class="image-close" @click="delImage(index)" />
      </div>
    </div>
data() {
    return {
      imgList: [],
      imgPreview: []
    }
  },
  methods: {
    onImportFileChange(file) {
      file.url = URL.createObjectURL(file.raw)
      this.imgList.push(file)
      this.imgPreview.push(file.url)
    },
    delImage(index) {
      this.$set(this.imgList, this.imgList.splice(index, 1))
      this.$set(this.imgPreview, this.imgPreview.splice(index, 1))
    }
  }

求解,谢谢~


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

delImage(index) {
  this.imgList.splice(index, 1)
  this.imgPreview.splice(index, 1)
}

你这样试试,splice删除数组元素可以更新到视图上,
你这种方式最后打印imaList和imgPreview里面有一项是undefined,
虽然不知道怎么出现的,但是可能和这个有关


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

33 comments

45.2k users

...