记一次多文件上传 使用element框架的实例 不显示进度条 提交按钮自己控制

效果在这里插入图片描述
文件上传的时候未完成不允许提交表单 显示上传进度(不能覆盖element不然没有上传进度条)
上代码

<el-upload
                    :on-progress="handleprogress"
                        class="upload-demo"
                        action="https://www.chineseafs-tc.org.cn/cky-rest/upload/upload"
                        :on-remove="handleRemove"
                        :on-success="handleUploadImageSuccess"
                    :file-list="fileList">
                        <el-button size="small" type="primary" style="padding: 2px 11px;">点击上传</el-button>
                        <p>只能上传word、excel、图片等</p>
                    </el-upload>
<script>
 data: function () {
          return {
            isok:false,
            fileName:'',
            signForm:{},
            showBuyDialog: false,
            fileList:[],
            zancunfileList:[],
          };
        },
        

     methods: {
            handleprogress(file) {
                this.isok=true;
            },
            handerror(err, file, fileList){
                this.$message.success(err);
                this.isok=false;
            },
            handleRemove(file, fileList) {
                this.zancunfileList = []
                fileList.forEach(element => {
                    this.zancunfileList.push(element.response.head)
                });
                
            },
            handleUploadImageSuccess (result) {
                this.isok = false;
                if(result.code==0){
                    this.postUserInfo.files = result.head;
                    // result.head.substr(result.head.lastIndexOf("/")+1
                        this.zancunfileList.push(result.head)
                        this.$message.success("上传成功!");
                }
           },
            uploadSectionFile (param) {
                this.isok = true;
                var fd = new FormData();
                fd.append("file", param.file);
                fd.append("token", sessionStorage.getItem("token"));
                uploadFile(fd).then(function (result) {
                param.onSuccess(result);
                });
            },
            submitHandle () {
                this.postUserInfo.files = this.zancunfileList
                
                }
        }
        </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值