element onUploadProgress

在使用elementUI的Upload上传组件时，可以通过axios的onUploadProgress方法来监听上传进度，并将进度反馈给进度条。在代码中，通过创建一个axios实例，并在请求中设置onUploadProgress属性来监听上传进度。具体的步骤如下：
1. 首先，创建一个FormData对象，并将要上传的文件添加到FormData中。
2. 创建一个axios实例，并设置其基本URL和其他配置。
3. 在请求中设置method为POST，url为上传文件的接口地址，data为前面创建的FormData对象。
4. 在onUploadProgress回调函数中，计算上传进度的百分比，并通过file.onProgress方法将进度反馈给进度条。
5. 最后，根据请求的返回结果进行相应的处理，如显示成功或失败的提示信息。

以上是通过axios的onUploadProgress方法来实现进度条的展示。还可以使用自定义上传以及进度条的展示，覆盖默认的上传行为。具体的步骤如下：
1. 在uploadFile方法中，创建一个FormData对象，并将要上传的文件添加到FormData中。
2. 发起一个axios请求，将method设置为post，url设置为上传文件的地址，data设置为前面创建的FormData对象。
3. 在onUploadProgress回调函数中，计算上传进度的百分比，并通过param.onProgress方法将进度反馈给进度条。

在elementUI的Upload组件中，可以使用http-request属性来指定上传文件的请求方法，before-upload属性用于文件上传前的校验。在template代码中，可以设置Upload组件的一些配置，如是否启用拖拽上传（drag）、是否支持多选文件（multiple）和上传的请求地址（action）。

综上所述，当使用elementUI的Upload组件时，可以通过axios的onUploadProgress方法来监听上传进度，并将进度反馈给进度条。也可以使用自定义上传以及进度条的展示来展示上传进度。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-upload上传文件时使用element自带进度条](https://blog.csdn.net/NJR10byh/article/details/125382925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [使用自定义上传行为http-request，不显示自带进度条的解决办法(选用axios的onUploadProgress方法)](https://blog.csdn.net/qq_56018649/article/details/120179089)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]