el-upload实现导入功能(手动上传导入)


<el-upload action="#" :show-file-list="false" class="upload-demo" :http-request="requestUpload">
    <el-button size="small" type="info" icon="el-icon-upload2">导入</el-button>
</el-upload>

       requestUpload(value) {
            const loading = this.$loading({
                lock: true,
                text: '正在导入',//等待提示文字
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'//背景
            });
            let data = new FormData();
            data.append('file', value.file);
            data.append('tbId', this.tbId);
            importMiddleData(data).then(res => {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                loading.close();
            }).catch(err => {
                loading.close();
            });
        },

### 解决Element UI `el-upload` 组件文件上传时显示加载状态的问题 为了使 Element UI 的 `el-upload` 组件在文件上传过程中正确显示加载状态,可以利用组件自带的状态属性和事件处理函数来控制自定义的加载指示器。具体来说,在文件上传期间设置一个标志变量用于展示加载动画,并通过监听上传完成或失败事件重置该标志。 #### 实现方案 1. **引入Loading服务** 需要先导入 Vue 中的 Loading 服务以便于调用其方法创建全局加载实例: ```javascript import { Loading } from 'element-ui'; ``` 2. **配置`el-upload`选项并绑定事件处理器** 设置 `auto-upload` 属性为 false 来手动触发上传行为;同时添加两个钩子函数——`before-upload` 和 `on-success/on-error` ——分别用来启动/停止加载提示以及更新视图逻辑。 3. **编写Vue组件代码片段** 下面是一个完整的例子展示了如何集成上述概念到实际项目里去: ```html <!-- template部分 --> <template> <div class="upload-demo"> <el-button type="primary" @click="handleClick">点击上传</el-button> <el-upload ref="upload" :action="url" :file-list="fileList" :http-request="customUpload" :auto-upload="false" :show-file-list="true" list-type="text" multiple> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> </el-upload> </div> </template> <!-- script部分 --> <script> export default { data() { return { url: '/api/upload', // 假设这是服务器端接收请求的URL路径 fileList: [], loadingInstance: null, }; }, methods: { handleClick() { this.$refs.upload.submit(); }, customUpload(options) { const formData = new FormData(); formData.append('file', options.file); this.loadingInstance = Loading.service({ fullscreen: true }); axios.post(this.url, formData).then(response => { console.log('success:', response); this.handleSuccess(); }).catch(error => { console.error('error:', error); this.handleError(); }); }, handleSuccess() { setTimeout(() => { this.loadingInstance.close(); // 关闭loading层 this.$message({ message: '上传成功', type: 'success' }); }, 500); // 模拟延迟关闭loading效果 }, handleError() { setTimeout(() => { this.loadingInstance.close(); // 关闭loading层 this.$message({ message: '上传失败,请稍后再试。', type: 'warning' }); }, 500); // 模拟延迟关闭loading效果 } } }; </script> ``` 4. **样式调整(可选)** 如果希望进一步优化用户体验,则可以根据需求定制 CSS 或者使用其他方式增强视觉反馈效果[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值