<el-upload
style="display: inline"
ref="upload"
:show-file-list="false"
:on-success="onSuccess"
:on-error="onError"
accept=".csv,.xls,.xlsx"
:before-upload="beforeUpload"
:on-change="handleChange"
:auto-upload="false" //禁止文件自动上传
action=".........."> //文件上传的后端地址
<!-- :auto-upload="false" -->
<el-button slot="trigger" size="small" type="primary" style="margin-top: 10px">选择文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
<!--<el-button size="mini" type="success" >导入</el-button>-->
</el-upload>
//选择文件并显示文件名/文件大小/状态 等
handleChange(file, fileList) {
this.oploadfileList = [];
let size = file.size;
if(size < 0.1 * 1024){ //小于0.1KB,则转化成B
size = size.toFixed(2) + "B"
}else if(size < 0.1 * 1024 * 1024){ //小于0.1MB,则转化成KB
size = (size/1024).toFixed(2) + "KB"
}else if(size < 0.1 * 1024 * 1024 * 1024){ //小于0.1GB,则转化成MB
size = (size/(1024 * 1024)).toFixed(2) + "MB"
}else{ //其他转化成GB
size = (size/(1024 * 1024 * 1024)).toFixed(2) + "GB"
}
let name = file.name;
let type = name.substring(name.lastIndexOf(‘.‘)+1);//文件后缀名
// console.log(name,size)
this.oploadfileList.push({file_name: name, file_size: size,file_jindu: ‘100%‘,file_zhuangtai:‘已上传‘,file_caozuo:‘此不可逆操作‘});
// console.log(fileList)
// this.fileData = new FormData()
// var that = this
this.fileList = fileList;
this.fileData.append(‘file‘, file);
},
//上传文件
submitUpload(file, fileList) {
this.$refs.upload.submit();
},
//文件上传成功后
onSuccess(response, file, fileList) {
// console.log(file)
// console.log(response)
this.uploadBtnIcon = ‘el-icon-upload2‘;
this.btnText = ‘数据导入‘;
if (response.code === 0) {
let _this=this; // 定义预存变量
setTimeout(function(){
_this.$message({
message: ‘批量操作成功‘,
type: ‘success‘
});
_this.dialogVisible2 = false;
},3000);
} else {
this.$message({
message: response.message,
type: ‘error‘
})
}
this.orderInfos()
},
el-upload 手动上传文件
标签:操作 handle 显示文件 for time dia display 转化 div
原文地址:https://www.cnblogs.com/moguzi12345/p/12870657.html
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
