用axios调用api的方式通过el-upload实现文件上传

1. 首先安装axios和element-ui：

npm install axios element-ui --save

2. 在需要使用el-upload组件的页面中，引入axios和element-ui：

import axios from 'axios'
import { Upload, MessageBox } from 'element-ui'

3. 在template中使用el-upload组件：

<el-upload
  class="upload-demo"
  action="/api/upload"
  :on-change="handleUpload"
  :before-upload="beforeUpload"
  :headers="headers"
  :data="uploadData"
  :auto-upload="false"
  :file-list="fileList"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

其中，action属性指定了上传文件的api地址；before-upload属性指定了上传文件前的校验函数；headers属性和data属性分别指定了请求的header和请求的参数；auto-upload属性设置为false，表示不自动上传文件；file-list属性绑定了已上传的文件列表；on-remove、on-success和on-error分别指定了文件移除、上传成功和上传失败的回调函数。

4. 在methods中添加上传文件的相关函数：

methods: {
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    const isLt500k = file.size / 1024 < 500;

    if (!isJPG) {
      this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
    }
    if (!isLt500k) {
      this.$message.error('上传头像图片大小不能超过 500KB!');
    }

    return isJPG && isLt500k;
  },
  handleUpload() {
    // 当上传文件列表发生变化时调用
  },
  upload() {
    this.$refs.upload.submit();
  },
  handleRemove(file, fileList) {
    // 当文件列表中的某个文件被移除时调用
  },
  handleSuccess(res, file, fileList) {
    // 当文件上传成功时调用
  },
  handleError(err, file, fileList) {
    // 当文件上传失败时调用
  }
}

5. 在handleSuccess函数中发起axios请求：

handleSuccess(res, file, fileList) {
  if (res.code === 0) {
    this.$message.success('上传成功');
    // 上传成功后，将文件信息添加到fileList中
    const { id, name, url } = res.data;
    fileList[fileList.length - 1].id = id;
    fileList[fileList.length - 1].name = name;
    fileList[fileList.length - 1].url = url;
  } else {
    this.$message.error('上传失败');
  }
},

在这个函数中，我们判断了上传结果的code，如果为0则表示上传成功，将文件信息添加到fileList中；否则表示上传失败，弹出提示信息。

6. 在created生命周期函数中设置请求header：

created() {
  this.headers = {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  };
}

在这里，我们将请求header设置为包含Authorization字段的对象，其值为从localStorage中获取的token。

7. 在methods中定义上传文件的函数：

upload() {
  this.$refs.upload.submit();
}

该函数调用了el-upload组件的submit方法，用于上传文件。

8. 最后，在methods中定义handleUpload函数：

handleUpload() {
  // 获取上传文件列表
  const files = this.$refs.upload.uploadFiles;

  // 遍历上传文件列表，发起axios请求
  files.forEach(file => {
    const formData = new FormData();
    formData.append('file', file.raw);

    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: `Bearer ${localStorage.getItem('token')}`
      },
      onUploadProgress: (progressEvent) => {
        // 显示上传进度条
        const percent = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
        this.$set(file, 'percentage', percent);
      }
    }).then(res => {
      if (res.code === 0) {
        this.$message.success('上传成功');
        // 上传成功后，将文件信息添加到fileList中
        const { id, name, url } = res.data;
        this.fileList.push({
          id,
          name,
          url
        });
      } else {
        this.$message.error('上传失败');
      }
    }).catch(err => {
      this.$message.error('上传失败');
    });
  });
}

在这个函数中，我们获取上传文件列表，遍历上传文件列表，发起axios请求，将文件信息添加到fileList中。同时，我们通过设置onUploadProgress回调函数，实时更新上传进度条。