element-plus实现图片上传


             
                
                
             

这里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: '',
})

你可能感兴趣的:(vue,html/css,js,vue.js,elementui,javascript)