上传excel文件效果展示
代码区域
特别注意 action就是你需要上传的地址,
template区域
drag class="upload-demo" ref="upload" :limit="limitNum" action="/admin/index/import" ///上传 :on-preview="handlePreview" :on-remove="handleRemove" accept=".xls, .xlsx" :file-list="fileList" :on-change="fileChange" :auto-upload="false" :on-exceed="exceedFile" :on-success="handleSuccess" :on-error="handleError" > 将Order文件拖到此处,或 点击上传
class="el-upload__tip"
slot="tip"
style="display: flex;justify-content: center;align-items: center;"
>只能上传xls与xlsx文件,且不超过10M
script区域
export default {
data() {
return {
limitNum: 1, // 上传excell时,同时允许上传的最大数
fileList: [],
length: 0, //当前上传文件个数
isBtn: false, //控制上传按钮能否点击
};
},
created() {
this.$store.state.adminleftnavnum = "0"; //设置左侧导航2-2 active
},
mounted() {
this.$store.state.adminleftnavnum = "0"; //设置左侧导航2-2 active
},
methods: {
submitUpload() {
let _this = this;
if (this.length === 0) {
this.$message.warning("请上传文件");
} else {
this.$refs.upload.submit();
this.isBtn = true;
}
},
handleRemove(file, fileList) {
// console.log(file, fileList);
this.length=0;
// console.log(this.length)
},
handlePreview(file) {
// console.log(file,111);
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
this.length=1;
// console.log(file.raw);
// // this.fileList.push(file.raw);
// console.log(this.fileList,this.length);
},
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
this.$message.warning(
`只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length +
fileList.length} 个`
);
},
// 文件上传成功时的钩子
handleSuccess(res, file, fileList) {
this.$message.success("文件上传成功");
this.$router.push({ path: "/order" });
},
// 文件上传失败时的钩子
handleError(err, file, fileList) {
this.$message.error("文件上传失败");
this.isBtn = false;
}
}
};
css区域
.header {
width: 100%;
padding: 10px;
margin-bottom: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #652c11;
letter-spacing: 2px;
}
.content {
display: flex;
justify-content: center;
align-items: center;
}
有些事件是无用的,可以直接删除