el-upload使用axios

el-upload 是 elementUI 中提供的上传组件，而 axios 是一个基于 Promise 的 HTTP 库，用于发送异步请求。因此，结合 el-upload 和 axios 可以实现文件上传功能。具体步骤如下：

1. 在前端代码中，使用 el-upload 组件创建一个上传控件，并设置 action 属性为后端接口地址。
2. 在 el-upload 组件中设置 :on-change 事件，用于监听文件选择事件。
3. 在事件处理函数中，通过 axios 创建一个 POST 请求，并将文件数据包装成 formData 对象。
4. 设置请求的 onUploadProgress 属性，用于监听上传进度变化。
5. 发送请求，并在 then() 方法中处理上传成功后的逻辑。

以下为示例代码：

// 前端代码
<el-upload
  action="/upload"
  :on-change="handleUpload"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">点击或文件拖拽到这里上传</div>
</el-upload>

// JavaScript 代码
methods: {
  handleUpload(file) {
    let formData = new FormData();
    formData.append("file", file.raw);
    
    axios.post("/upload", formData, {
      onUploadProgress: (progressEvent) => {
        let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
        this.percent = percent;
      }
    }).then((res) => {
      // 处理上传成功后的逻辑
    });
  }
}