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();
