1、//封装的上传excel组件
<template>
<el-button
@click="clickUpload"
style="font-size: 12px; vertical-align: baseline"
@mouseover.native="hover = true"
@mouseleave.native="hover = false"
:plain="plain"
>
<img
v-show="hover"
src="@/assets/images/import.png"
alt=""
style="width: 10px; height: 10px; margin: 0 5px"
/>
<img
v-show="!hover"
src="@/assets/images/importAct.png"
alt=""
style="width: 10px; height: 10px; margin: 0 5px"
/>
{{ label }}
<input
size="mini"
ref="fileInput"
type="file"
@change="getUpload($event)"
style="display: none"
/>
</el-button>
</template>
<script>
export default {
name: "",
props: ["label", 'plain'],
data() {
return {
hover: false,
};
},
methods: {
clickUpload() {
this.$refs.fileInput.click();
},
getUpload(e) {
let file = {};
let fileName = "";
if (e.target.files[0]) {
file = e.target.files[0];
fileName = file.name;
e.target.value = '';//此行代码就是解决问题的关键
}
if (typeof FileReader === "undefined") {
this.$msg.warning("您的浏览器不支持");
return;
}
console.log(fileName.includes("xls"));
console.log(fileName.includes("xlsx"));
if (!fileName.includes("xls") && !fileName.includes("xlsx")) {
this.$msg.warning("请上传正确的excel文件");
file = {};
fileName = "";
return;
}
this.$emit("handleupload", { file: file, fileName: fileName });
},
},
};
</script>
<style scoped lang='scss'>
.el-button {
background-color: #76c40233;
border-color: #76c40233;
color: #76c402;
}
.el-button:hover {
background-color: #285e3c;
border-color: #285e3c;
color: #ffffff;
}
</style>
2、使用
<template>
<div class="app-container">
<uploadFileBtn
icon="el-icon-upload"
label="导入"
plain
@handleupload="handleUpload"
></uploadFileBtn>
</div>
</template>
<script>
import UploadFileBtn from "@/components/uploadFileBtn";//此路径是封装上传组件的路径
export default {
components: { UploadFileBtn },
name: "User",
data() {
return {
};
},
methods: {
// 导入
handleUpload(data) {
let params = new FormData();
params.append("file", data.file);
importBox(params).then(({ code, msg }) => {//导入的后端接口
if (code == 200) {
this.$message({
type: "success",
dangerouslyUseHTMLString: true,
message: msg,
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
3、效果