element-plus实现图片上传

<el-form-item label="头像" label-width="80px">
             <el-upload
                class="avatar-uploader"
                :action="`${path}/fileUploadAndDownload/upload`"
                :headers="{ 'x-token': userStore.token }"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                v-model="userInfo.headerImg"
              >
                <img v-if="userInfo.headerImg" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
             </el-upload>
</el-form-item>

这里action是api的路径，headers是token

2.在script中写成功的回调以及失败的回调函数，代码如下

// 图片上传成功的函数
const uploadSuccess = (res, upload)=> {
  console.log(res)
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '上传成功'
        })
        imageUrl.value = URL.createObjectURL(upload.raw)
        userInfo.value.headerImg = res.data.file.url
      } else {
        ElMessage({
          type: 'warning',
          message: res.msg
        })
      }
}
//图片上传失败的回调
const uploadError = ()=> {
      ElMessage({
        type: 'error',
        message:'上传失败'
      })
}

3.数据的声明

const userInfo = ref({
  headerImg: '',
})