element-ui通过axios上传头像

你可以使用Element UI中的Upload组件来上传头像。同时，在上传过程中，你可以使用axios库来实现上传操作。

以下是一个示例代码：

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="uploadUrl"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        imageUrl: '',
        uploadUrl: '/api/upload/avatar'
      };
    },
    methods: {
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return false;
        }
        return true;
      },
      handleUploadSuccess(response) {
        if (response.code === 200) {
          this.imageUrl = response.data.imageUrl;
          this.$message.success('上传成功!');
        } else {
          this.$message.error('上传失败!');
        }
      }
    }
  };
</script>

在这个示例中，我们使用了Element UI的Upload组件来实现头像上传。我们设置了上传的地址`uploadUrl`为`/api/upload/avatar`，在上传之前，我们通过`beforeUpload`方法来验证上传文件的格式和大小。如果验证通过，我们就可以使用axios来将文件上传到服务器。在上传成功后，我们通过`handleUploadSuccess`方法来处理上传成功的结果。如果上传成功，我们将服务器返回的图片地址赋值给`imageUrl`，并且提示上传成功。