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

最新推荐文章于 2023-08-07 18:03:43 发布

一只大大大大狗

最新推荐文章于 2023-08-07 18:03:43 发布

阅读量637

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_43152108/article/details/109856809

版权

vue学习专栏收录该内容

28 篇文章 1 订阅

订阅专栏

效果在这里插入图片描述
文件上传的时候未完成不允许提交表单显示上传进度(不能覆盖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>