上传图片（携带id）

1. 操作按钮

//表格中操作按钮（打开上传图片弹窗，获取id）
<el-button type="primary" size="mini" icon="el-icon-upload" @click="imgUpdate(row)">
    上传图片
</el-button>

2. 上传图片按钮

<el-upload 
    ref="uploadImg" 
    action="TbStudent/uploadImage"     //要传图片的接口
    :headers="headers" 
    :data="uploadParams"        //传id（最重要）
    accept="image/jpg,image/jpeg" 
    list-type="picture-card" 
    :limit="limitNum" 
    :on-exceed="handleExceed"
    :before-upload="handleBeforeUpload" 
    :on-success="handleSuccess1" 
    :on-error="handleError">
</el-upload>

3. 显示图片

<img :src="src" alt="头像" style="width: 20%;position: absolute;right: 5%;top: 10%;">

4. data()

data(){
  return{
    headers: {
       'Authorization': 'Bearer ' + getToken()
    },
    uploadParams: {
        id: null
    },
    limitNum: 1
    }
} 

5. methods() 

// 照片文件超出个数限制时的钩子
handleExceed(files, fileList) {
   this.$notify.warning({
   title: '警告',
   message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
  })
},
// 上传照片文件之前的钩子
handleBeforeUpload(file) {
   console.log(file.type)
   if (!(file.type === 'image/jpg' || file.type === 'image/jpeg')) {
   this.$notify.warning({
      title: '警告',
      message: '请上传格式为image/jpg的图片'
      })
   }
   const size = file.size / 1024 / 1024
      if (size > 1) {
        this.$notify.warning({
        title: '警告',
        message: '图片大小必须小于1M'
      })
   }
},
handleSuccess1() {
    this.dialogImageUrl = ''
     this.$notify({
        title: '通知',
        message: '添加证件照成功',
        type: 'success',
        duration: 5000
   })
},
// 上传图片
imgUpdate(row) {
   this.uploadParams.id = row.id  //表格中获取到id
   this.imgVisible = true
},

回显图片查看我的另外一篇博客 ： 后端返回一张图片如何显示