weixin_57808501 2022-05-26 11:22 采纳率: 37.5%
浏览 233
已结题

vue+element上传文件展示进度条,同时抛出上传状态

问题遇到的现象和发生背景

img

问题相关代码,请勿粘贴截图

我这边写了两个弹框,文件导入一个,进度条一个,我这边在fileList传给了导入按钮

<el-dialog title="指标批量导入" :visible.sync="dialog" width="30%">
            <el-form>
                <el-form-item label="1.模板下载:" >
                  <div>
                    <span class="standingBook" @click="uploadText">下载模板</span>
                  </div>
                </el-form-item>
                <el-form-item label="2.批量导入:" >
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                         multiple
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-change="handleChange"
                        :file-list="fileList"
                        :auto-upload="false">
                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="confirm(fileList)">导入</el-button>
            </div>
        </el-dialog>
        <el-dialog title="正在导入" :visible.sync="progress" width="30%">
            <el-progress v-if="showProcess" :percentage="processLen" />
            <div>正在导入,请勿关闭该弹窗</div>
        </el-dialog>
 handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange(file, fileList){
      console.log(file,'file');
      this.fileList = fileList
      console.log(fileList,'fileList');
       if (file.status === 'ready') {

       }
    },
    // 弹框导入确定按钮
    confirm(value){
      console.log(value);
      if(value.length > 0){
        this.dialog = false
        this.progress = true
        this.showProcess = true
      }else{
        this.$message.error('请选择你要导入的文件');
      }
    }

完全没有思路了,方便的提供点思路,附上完整代码,以前没做过,谢谢各位

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 6月3日
    • 创建了问题 5月26日

    悬赏问题

    • ¥50 H5+js 动态数字画廊怎么做?
    • ¥20 外向内全景图像拼接相关项目和论文咨询
    • ¥15 求解,高等数学上,可不可以讲一下思路
    • ¥20 请写个前端案例学习使用
    • ¥500 求Java Socks5 转发实现
    • ¥15 关于#python#的问题,请各位专家解答!
    • ¥20 笔记本电脑 处理器是AMD的r7
    • ¥15 需要在vitis下实现彩调视频图像累加,并输出
    • ¥15 解决不了的LNK2019错误
    • ¥20 MATLAB仿真三相桥式全控整流电路