element+Vue上传zip文件

8,403 阅读1分钟
ref : 绑定DOM元素 
action:接口地址
data : 你要传入的参数
on-preview:点击文件列表中已上传的文件时的钩子
name:文件的参数名
on-remove  :移除你上传的文件
on-error   失败运行的钩子函数
on-success 成功运行的钩子函数
multiple 是否上传多个文件
on-exceed 文件超出运行的钩子函数
before-upload 上传当中运行的钩子函数
auto-upload 手动还是自动上传
limit 上传的文件个数

    <el-upload
        class="upload-demo"
        ref="classZip"
        action="action"
        :data="{taskId:helloTaskId}"
        :on-preview="handlePreview"
        name="classZip"
        :on-remove="handleRemove"
        :on-error="handleError"
        :on-success="handleSuccess"
        multiple 
         :on-exceed="handleExceed"
        :before-upload="beforeAvatarUpload"
        :limit="1"
         :on-change="handleChange"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
        <div slot="tip" class="el-upload__tip" style="color: red;">{{message}}</div>
       </el-upload>										
       <button class="helloSubmitBtn" 
         @click="submitUpload" :class="helloTaskId!=''&&wordFlag==true?'subMitError':'subMitSuccess'"
         >提交</button>
         
         
             export default {
 name: 'HelloWorld',
 data () {
  return {
    sunmitShow:false,
    helloTaskId:'',
    imgFlag: false,
    message:'',
    Wordmessage:'', //输入不能为空提示
    fileNmae:'',
    wordFlag:false
  }
 },
  methods:{
   handleChange(){
     this.wordFlag=true;
   },
   handleExceed(files,fileList){
 //  console.log(files,fileList,"文件超出个数限制时的钩子");
    this.message="只允许上传一个文件";
   },
   upload(){
    
   },
   beforeAvatarUpload(file){
   var FileExt = file.name.replace(/.+\./, "");    
  if (['zip', 'rar','gz',".apk"].indexOf(FileExt.toLowerCase()) === -1){ 
    this.message="文件格式有误,请重新上传"
   return false;    
  }
   
   this.message="上传中,请稍等"
  
    
   },
   handleError(err, file, fileList){
 //  console.log(err, file, fileList,"失败")
    this.message="上传失败";
   },
   handleSuccess(response, file, fileList){
  //console.log(response, file, fileList,"成功")
  
    this.message="上传成功";
      setTimeout(()=>{
       this.$router.push({
      path:"/homePage",
      query:{
       id:1
      }
     })
      },1000)
   },
  helloSunmitBtn(){

  },
  submitUpload() {
//  console.log(this.$refs.classZip)
   if(!this.wordFlag){
    this.message="请上传文件";
    return
   }
    if(this.helloTaskId==""){
     this.Wordmessage="请填写任务ID";
     return
   }else{
     this.Wordmessage=""
     this.$refs.classZip.submit();
    }
    
   },
   handleRemove(file, fileList) {
   // console.log(file, fileList,"删除");
  },
  handlePreview(file) {
    //  console.log(file,"已上传的文件时的钩子");
  }