el-upload标签调用上传图片接口实现图片上传

el-upload标签是element-ui组件库的一个上传组件，可以方便地实现图片上传功能。调用上传图片接口实现图片上传的具体步骤如下：

1. 在Vue组件中引入el-upload组件：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

2. 在data中定义上传文件的参数：

data() {
  return {
    imageUrl: '',
    uploadHeaders: {
      'Authorization': 'Bearer ' + getToken(),
    },
  };
},

这里需要注意的是，上传图片时需要带上token进行身份验证，因此我们在uploadHeaders中添加了Authorization参数，值为当前用户的token。

3. 定义上传成功和上传失败的回调函数：

methods: {
  handleSuccess(response, file, fileList) {
    this.imageUrl = response.url;
    this.$message({
      message: '上传成功',
      type: 'success',
    });
  },
  handleError() {
    this.$message.error('上传失败');
  },
},

上传成功后，我们可以在handleSuccess回调函数中获取到服务器返回的图片url，然后将其赋值给imageUrl，以便在页面上显示上传的图片。

4. 定义上传前的钩子函数：

beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
    return false;
  }
  return true;
},

在beforeUpload函数中，我们可以对上传的图片进行一些校验，比如限制图片的格式和大小等。

5. 最后，在服务器端编写上传图片的接口，接收图片文件并保存到服务器中。

以上就是使用el-upload标签调用上传图片接口实现图片上传的具体步骤。