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 的进度效果了。

element的upload组件发送视频请求给后端操作

element的upload组件可以通过发送视频请求给后端操作来实现视频的上传功能。

首先，在前端页面中引入element的upload组件，并设置相应的配置项，通过设置action属性指向后端的接口地址，如下所示：

<el-upload
action="/api/video/upload"
class="upload-demo"
:http-request="customUpload"
:multiple="false"
:on-success="handleSuccess"
:on-progress="handleProgress"
:on-error="handleError"
>
<el-button size="small" type="primary">点击上传视频</el-button>
</el-upload>

其中，action属性指向后端的接口地址，http-request属性用于自定义上传的请求方法。

接下来，我们需要在data选项中定义一个方法来处理上传请求，如下所示：

data() {
return {
...
};
},
methods: {
customUpload(file) {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append("video", file.raw);
// 将视频文件放入FormData对象中

// 发送请求给后端的接口
axios.post("/api/video/upload", formData, {
headers: {
"Content-Type": "multipart/form-data"
},
onUploadProgress: progressEvent => {
this.uploadProgress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
// 上传进度处理
}
})
.then(response => {
resolve(response.data);
// 上传成功处理
})
.catch(error => {
reject(error);
// 上传失败处理
});
});
},
handleSuccess(response) {
// 上传成功后的回调函数
},
handleProgress(event, file, fileList) {
// 上传过程中的回调函数
},
handleError(error, file, fileList) {
// 上传失败后的回调函数
}
}

在customUpload方法中，创建一个FormData对象，并将文件对象添加到其中，然后通过axios库发送post请求，并在请求头中设置"Content-Type"为"multipart/form-data"，同时处理上传进度。上传成功后，调用resolve方法将后端返回的数据传递给handleSuccess方法处理。上传失败后，调用reject方法将错误信息传递给handleError方法处理。可以根据项目的需求进一步进行具体的处理。

以上就是通过element的upload组件发送视频请求给后端操作的方法。