![](https://i-blog.csdnimg.cn/blog_migrate/f383c9b1e1fc5e4cb78a30ef82025be4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ab55475889fc1d0ede2920c11ed107f0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6e65f47fe54eac38fe3ef0e8f3305ae5.png)
点击取消后取消上传文件。点击确认 手动上传成功
<template>
<div>
<h4>临时文件</h4>
<el-table :data="groupList" style="width: 100%">
<el-table-column prop="name" label="分组名称"></el-table-column>
<el-table-column prop="total" label="用户数"></el-table-column>
<el-table-column prop="remark" label="备注">
<template slot-scope="scope">
<span v-if="scope.row.remark == ''||scope.row.remark == null">
-
</span>
<span v-if="scope.row.remark !='' || scope.row.remark != null">
{{scope.row.remark}}
</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-upload class="upload-test" :action="uploadUrl()"
accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:limit="1"
:show-file-list = "false"
:file-list="fileList"
ref="upload"
:on-preview="handlePreview"
:on-exceed="exceedHander"
:before-upload="beforeAvatarUpload"
:auto-upload="false"
:on-change="testOnchange"
:before-remove="handleRemoveHook"
:on-success="handleSuccess">
<!-- <el-button size="small" v-if="fileList == ''">选取文件</el-button> -->
<span class="cur" @click="importUser(scope.$index, scope.row)">导入用户</span>
</el-upload>
</template>
</el-table-column>
</el-table>
<!-- 导入用户 弹窗二次确认 -->
<el-dialog title="导入Excel" :visible.sync="importUserDialog" width="550px" :close-on-click-modal="false" :before-close="handleFirst1">
<span v-if="fileList != ''" class="info-message">确认导入 “ {{fileList[0].name}} ” , oppenid相同会直接被覆盖</span>
<span slot="footer" class="dialog-footer">
<el-button @click="handleFirst1">取 消</el-button>
<el-button type="primary" @click="handleConfimr">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
const request = require('superagent');
export default {
data(){
return{
listId:'',
fileList:[],
importUserDialog:false,
pageNum:1,
pageSize:10,
groupList:[],
}
},
created(){
// 获取会员列表
// console.log(request)
},
mounted(){
this.getVipList();
},
methods:{
getVipList(){
const that = this;
request
.get('/api')//获取数据接口
.query({pageNum:that.pageNum})
.query({pageSize:that.pageSize})
.end(function(err,res){
if(err || !res.ok){
alert('oh on ! error')
}else{
// console.log(res)
that.groupList = res.body.data.fieldList
}
})
},
importUser(index,row){
this.listId = row.id;
// this.importUserDialog = true;
},
uploadUrl(){//动态改变上传地址
return(
"项目接口规定单词/" + this.listId + "/接口规定单词" //接口拼接起来的this.listId为动态数据
)
},
handlePreview(file){},
exceedHander(){
this.$message.warning('请勿上传多个文件')
},
beforeAvatarUpload(file){
console.log('上传前');
const Xls = file.name.split('.');
const isLt2M = file.size / 1024 / 1024 < 10;
console.log('1');
if(Xls[1] === 'xls'|| Xls[1] === 'xlsx'){
return file;
}else{
this.$message.error('上传文件只能是 xls/xlsx 格式')
return false
}
if(!isLt2M){
this.$message.error('上传模板大小不能超过 10MB')
return false;
}
},
// 文件状态改变
testOnchange(file, fileList){
this.fileList = fileList;
if(this.fileList.length != 0){
this.importUserDialog = true;
}else{
this.importUserDialog = false;
}
},
handleRemoveHook(file,fileList){},
handleConfimr(){
this.$refs.upload.submit();
this.importUserDialog = false;
},
handleSuccess(response, file, fileList){
console.log('上传成功');
if(response.code == 200){
setTimeout(() =>{
this.$message.success('文件上传成功');
this.getVipList();
},2000);
fileList.splice(0);//上传成功后将fileList清空,不影响下一次上传
}else{
this.$message.error(response.message)
}
},
handleFirst1(){
this.fileList.splice(0);
this.importUserDialog = false;
this.$message.info('已取消上传');
},
}
}
</script>