选取文件.
支持word、excel、pdf、ppt文件大小不超过50MB
" />

element upload 解决多文件上传一次请求

来源:博客园 分类: 文章浏览史 发布时间:2020-12-09 16:11:16 最后更新:2020-12-09 浏览:91
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-12-09 16:11:16

在原来ul基础上加 :http-request="uploadFile"即可,其他函数都可以用,只是请求方式自定义。

把文件放入formDate中

            <el-form-item>
                <el-upload
                class="upload-demo"
                ref="upload2"
                :auto-upload="false"
                multiple
                :limit="10"
                :on-exceed="handleExceed2"
                :before-upload="beforePd2"
                :file-list="fileList2"
                :with-credentials="true"
                :http-request="uploadFile"
                accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx">
                <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button>
                <div slot="tip" class="el-upload__tip">支持word、excel、pdf、ppt文件大小不超过50MB</div>
                </el-upload>               
 
  handleExceed2(){
    this.$message.error('超出最大上传限制')
  },
  beforePd2(file){
    var count = 0;
    for(var i = 0;i <file.name.length;i++){
        if(file.name[i] == '.'){
        count++;
        }
    }
        if(file.size > 1024*1024*50){
        this.$message({
            type:'warning',
            message:'上传文件最大限制50MB'
        })
        return false;
        }else if(count != 1){
        this.$message({
            type:'warning',
            message:'文件名称不规范,包含多个"."'
        })
        return false;
        }else{
        return true;
        } 
    },
  ckSubmit(fileList){
    if(this.$refs.upload2.$children[0].fileList.length == 0){
        this.$message({
        type:'warning',
        message:'选择文件不能为空'
        })
    }else{
        this.$refs.ckRef.validate(valid => {
            if(valid){
                this.formDate = new FormData()
                this.formDate.append('addck','1');
                this.$refs.upload2.submit();
                var ts = this;
                axios.post(this.paths.baseURL+'/hiddendanger/checkHD',
                this.formDate, 
                { headers: { 'Content-Type': 'multipart/form-data' } }
                  ).then((res)=>{
                      if(res.data.code == 2001){
                        ts.$router.push({
                            name:'Login'
                        })
                      }else{
                        ts.$message.success('检查成功')
                        this.ckDialog = false;
                        this.findHD();
                      }
                  }).catch(function (response) {
                    console.log(response)
                         ts.$message.error('检查异常')
                  });       
                }
            })
    }  
    },
    uploadFile(file){
      this.formDate.append('file', file.file);
      console.log(file)
    }
 
 
php技术微信