element-ui upload

element-ui upload文件上传的坑之一~~~就是情况稍微复杂一点的情况就得用手动上传（下一个按钮实现不了！！）

• 1、自动上传
  选中文件 --》 点击打开 就自动执行submit方法

• 2、手动上传(两个按钮)
  说这个之前先说下组件中的http-request属性，官方文档上写的很清楚：覆盖默认的上传行为，可以自定义上传的实现

  
  
  

  这个时候action不能为空，给个形式上的字符串就行

<template>
 <el-upload :action="string" :show-file-list="false" :http-request="httpRequest">
    <el-button size="mini" type="primary" >导入</el-button>
 </el-upload>
</template>
<script>
export default {
 methods: {   
  httpRequest(item){      
   console.log(item.file);      
   //...
  }     
 }
}
</script>

注意：before-upload返回false或者auto-upload为false的情况下是不会触发http-request事件的

• 3、多文件上传
  element-ui中upload多文件上传时默认请求单独分开发送(也就是几个文件发几次请求！！！) ，要想一次发送多个文件得手动上传

<template>
 <el-upload action="string"  :multiple="true" :before-upload="beforeupload" :show-file-list="false">
    <el-button size="mini" type="primary"  @click="clearUpload">导入</el-button>
 </el-upload>
 <el-button size="mini" type="primary"  @click="submitUpload"  >手动上传</el-button>
</template>
<script>
export default {
 data(){
  return{
   uploadForm: new FormData(),
  }
 },
 methods: {  
  //获取文件
  beforeupload(file){
    this.uploadForm.append('file', file);
    return false;
  }, 
  clearUpload(){
    this.uploadForm = new FormData();
  },
  //手动上传
  submitUpload(){      
   let data = this.uploadForm;
   $.ajax({         
     url: '...',         
     type: "POST",
     data: data,
     processData: false,//必写
     contentType: false,//必写
     success:function(rs){
      if(rs.errorCode == '0')
       MessageBox({ title: '提示', message: '导入成功!', type: 'success' });
      else
       MessageBox({ title: '提示', message: '导入失败!', type: 'error' });
      }
    });
   }     
 }
}
</script>

• 4、用<input type="file" hidden>实现多文件上传

<template>
 <el-button type="primary" size="mini"  @click.native="impClick">导入</el-button>
 <!-- change事件能获取文件，若点击取消不触发-->
<input multiple hidden accept=".xml" id="__input-file" type="file" @change="importData($event)">
</template>
<script>
export default {
 methods: {  
  //触发
  impClick(){
    $('#__input-file').click();
  },
  importData(e){      
    let files = e.target.files;
    let formData = new FormData();
    for (let file of files) {
     formData.append('files', file);
    }
    $.ajax({         
      url: '...',         
      type: "POST",
      data: data,
      processData: false,//必写
      contentType: false,//必写
      success:function(rs){
       if(rs.errorCode == '0')
        MessageBox({ title: '提示', message: '导入成功!', type: 'success' });
       else
        MessageBox({ title: '提示', message: '导入失败!', type: 'error' });
       }
     });
    }     
  }
 }
</script>

• 5、传文件之外的参数
  1)、element-ui

<!-- impData是个对象 -->
 <el-upload :action="importUrl" :on-success="importSuccess" 
:on-error="importError" :show-file-list="false"   :data="impData" :multiple="false">
  <el-button size="mini" type="primary" >导入</el-button>
</el-upload>

2)、将参数放在actoin 的路径中

3)、FormData.append();