使用element实现图片上传

需求:没有图片的时候按钮显示上传图片,有的时候显示重新上传,当点击按钮的时候上传成功后会替换掉原来的图片


        
      
data(){
  return {
    //这个tabledata就是我绑定的table里的数据
    tabledata: [],
    uploadUrl: process.env.BASE_API + '/upload/uploadPic'
  }
}
methods: {
  uploadImgDisplay(index) {
    //点击按钮之后把当前这一列的索引值赋给一个data
      this.currentIndex = index
    },
  handleAvatarSuccess(response) {
      //上传成功后在table绑定的数据中找到当前索引下的图片链接修改
      this.tabledata[this.currentIndex].imgUrl = response.data
      //这里之所以要获取img是因为我们新建的时候虽然拿到了新的图片的url,
//但是当前img的src还是空的,所以我们就需要每次成功后通过dom拿到第一行的img(因为我每次新增都是添加到第一行)
//然后把它的src修改为最新的
      const firstImg = document.querySelector('.firstImg')
      firstImg.src = response.data
    }
}

你可能感兴趣的:(使用element实现图片上传)