使用element实现图片上传

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

<el-table-column prop="imgUrl" label="*轮播图片" width="280" align="center">
        <template slot-scope="scope">
          <span>
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :headers="uploadHeader"
              :show-file-list="false"
              :limit="1"
              :on-success="handleAvatarSuccess"
            >
              <img :src="scope.row.imgUrl" class="avatar firstImg">
              //因为我们不能对upload组件里的事件传入当前的scope，
//所以我们只能在点击button的时候触发一个事件，把当前的index传进去，
//然后成功后修改tabledata[index].imgUrl即可
              <el-button size="small" type="primary" @click="uploadImgDisplay(scope.$index)">{{scope.row.imgUrl ? '重新上传' : '图片上传'}}</el-button>
            </el-upload>
          </span>
        </template>
      </el-table-column>
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
    }
}