element upload axios自定义上传 进度不见了

如果您使用Element UI和Axios进行自定义上传，并且上传进度不见了，可能有几个原因：

1. 您没有启用上传进度

要启用上传进度，您需要在Axios请求中添加 `onUploadProgress` 回调函数。例如：

axios.post('/upload', formData, {
  onUploadProgress: function(progressEvent) {
    // 计算上传进度
    var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
});

2. 您的浏览器不支持上传进度

某些浏览器可能不支持上传进度。请确保您的浏览器支持上传进度并且您正在使用支持该功能的最新版本的浏览器。

3. 您的服务器未正确配置

如果您的服务器未正确配置，可能会导致上传进度不可用。请确保您的服务器已配置为正确处理上传进度。

如果您已经尝试了以上解决方法，但仍然无法解决问题，请提供更多细节，我会尽力帮助您解决问题。

相关问题

element upload axios自定义上传 仍能实现action的进度效果

可以实现。在使用 element upload 和 axios 自定义上传时，可以通过监听 axios 的上传进度事件来更新 element upload 的进度条。具体实现步骤如下：

1. 在 element upload 中，将 show-file-list 属性设置为 false，禁止显示上传文件列表，原因是自定义上传时不需要 element upload 自己去上传文件。

2. 在 element upload 的 before-upload 方法中，将文件上传到服务器。在上传过程中，监听 axios 的上传进度事件，更新 element upload 的进度条。

示例代码如下：

<el-upload
  :show-file-list="false"
  :on-preview="handlePreview"
  :before-upload="handleUpload">
  <el-button>点击上传</el-button>
</el-upload>

handleUpload(file) {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/api/upload', formData, {
    onUploadProgress: progressEvent => {
      // 更新 element upload 的进度条
      this.$refs.upload.uploadFiles.forEach(item => {
        if (item.raw === file) {
          item.percentage = (progressEvent.loaded / progressEvent.total) * 100;
        }
      });
    }
  }).then(response => {
    // 上传成功
  }).catch(error => {
    // 上传失败
  });
}

在上面的示例代码中，我们在 axios 的 post 请求中通过 onUploadProgress 监听上传进度事件，并更新 element upload 中对应文件的进度条。注意，在更新进度条时，需要通过 this.$refs.upload.uploadFiles 来获取 element upload 中已经添加的文件列表，并找到对应文件来更新进度条。

这样就可以在使用 element upload 和 axios 自定义上传时，仍能实现 action 的进度效果了。

axios 封装 上传进度

axios的封装可以实现上传进度的监听。你可以使用axios提供的`onUploadProgress`方法来监听上传进度。以下是一个示例：

import axios from 'axios';

const uploadFile = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  return axios.post('/upload', formData, {
    onUploadProgress: progressEvent => {
      const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      console.log(`上传进度: ${progress}%`);
    }
  });
};

在这个示例中，我们使用`axios.post`方法来进行文件上传，同时传入一个包含上传进度监听的`config`对象。在`onUploadProgress`方法中，我们可以通过`progressEvent.loaded`和`progressEvent.total`来计算上传进度，并将结果输出到控制台。