首页el-upload统一封装上传loading 不修改el-upload所在页面代码

el-upload统一封装上传loading 不修改el-upload所在页面代码

时间: 2025-01-20 15:01:01 浏览: 62

`el-upload`是Element UI库中的一个组件，用于文件上传功能。如果你想统一管理上传过程中的加载状态而不直接修改`el-upload`所在的页面代码，可以考虑以下几个步骤： 1. **隔离组件**：创建一个新的自定义组件，例如`CustomUpload`，这个组件将包裹`el-upload`。这样做的好处是可以复用并控制上传的行为。 ```html <template> <div class="custom-upload"> <el-upload :action="uploadUrl" :on-change="handleChange" ...></el-upload> <span v-if="isLoading">正在上传...</span> </div> </template> ``` 2. **数据绑定**：通过props将需要传递给`el-upload`的属性（如`url`、`fileList`等）从父组件传入`CustomUpload`。 ```js <script> export default { props: { uploadUrl: String, fileList: Array, isLoading: Boolean }, methods: { handleChange(file) { // 你可以在这里处理上传事件，并更新`isLoading`状态 this.isLoading = true; // 上报到父组件或其他地方处理实际上传逻辑 } } } </script> ``` 3. **外部控制**：父组件调用`CustomUpload`的方法来触发上传操作，并监听`isLoading`的变化，以此来显示对应的加载状态。 ```html <custom-upload :upload-url="apiUrl" :is-loading="uploadingStatus" @ uploading-end="handleUploadEnd"></custom-upload> ... data() { return { apiUrl: 'your-api-url', uploadingStatus: false, }; }, methods: { handleUploadEnd() { this.uploadingStatus = false; } } ```

阅读全文