<template>
|
<div class="main">
|
<div class="upload" @click="selectFile" @dragover="dragover" @drop="drop">
|
<div ref="txt" class="upload__text">
|
将文件拖到此处，或点击此处选择文件
|
</div>
|
</div>
|
<div class="upload__tip" slot="tip">
|
只能解析.fbx .fbxc .mcp .mch .bres .alm .bcp .chr 文件
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from "@/assets/js/axios";
|
|
export default {
|
name: "",
|
|
data() {
|
let reselect = !!this.$route.query.reselect;
|
return {
|
URL: "",
|
reselect,
|
};
|
},
|
components: {},
|
methods: {
|
change(file) {
|
// let $el = this.$refs.input;
|
// console.log($el.files[0].path);
|
if (!file || !file.raw) {
|
return false;
|
}
|
console.log(file);
|
this.loadFile(file.raw);
|
},
|
loadFile(url) {
|
// TODO 文件类型判断
|
let arr = url.split(".");
|
let type = arr.length > 1 ? arr[arr.length - 1].toLowerCase() : "";
|
// 支持的类型
|
let allowList = ["fbx", "fbxc", "mcp", "mch", "bres", "alm", "bcp", "chr"];
|
|
if (!allowList.some((v) => v == type)) {
|
this.$layer.msg("文件类型错误");
|
return false;
|
}
|
let suffixes = "";
|
switch (type) {
|
case "fbx":
|
case "fbxc":
|
suffixes = "fbx";
|
break;
|
case "mcp":
|
case "mch":
|
suffixes = "mcp";
|
break;
|
case "bres":
|
suffixes = "res";
|
break;
|
case "alm":
|
suffixes = "alm";
|
break;
|
// 放电
|
case "bcp":
|
suffixes = "bcp";
|
break;
|
// 充电
|
case "chr":
|
suffixes = "chr";
|
break;
|
}
|
let loading = this.$layer.loading(1);
|
axios({
|
url: "readFboFile",
|
method: "GET",
|
params: {
|
filePath: url,
|
},
|
}).then((res) => {
|
let { code, data } = res.data;
|
// console.log(res, res.code, "=========res");
|
this.$layer.close(loading);
|
if (code) {
|
data.filePath = url;
|
// 解析成功 跳转到结果页面
|
this.$router.push({
|
path: `/result-${suffixes}`,
|
query: {
|
data,
|
},
|
});
|
}
|
});
|
},
|
dragover(e) {
|
e.preventDefault();
|
return true;
|
},
|
drop(e) {
|
// console.log(e);
|
//必须要阻止拖拽的默认事件
|
e.preventDefault();
|
e.stopPropagation();
|
|
//获得拖拽的文件集合
|
var files = e.dataTransfer.files;
|
// console.log(files);
|
if (!files) {
|
return false;
|
}
|
let url = files[0] ? files[0].path : "";
|
|
if (url) {
|
this.loadFile(url);
|
}
|
},
|
initEvents() {
|
console.log("initEvents");
|
window.api.receive(
|
"selected-file",
|
(path, data) => {
|
console.log(path, data, "selected-file");
|
if (data && data == "selectFile") {
|
let url = path.filePaths[0];
|
if (url) {
|
this.loadFile(path.filePaths[0]);
|
}
|
}
|
},
|
true
|
);
|
},
|
selectFile() {
|
// console.log("openfile");
|
window.api.send("open-file-dialog", "selectFile");
|
},
|
},
|
|
mounted() {
|
this.initEvents();
|
|
if (this.reselect) {
|
this.$refs.txt.click();
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.main {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
.upload {
|
/* flex: 1; */
|
width: 80%;
|
height: 80%;
|
display: flex;
|
flex-direction: column;
|
text-align: center;
|
background: #fff;
|
border-radius: 8px;
|
justify-content: center;
|
}
|
.upload__tip {
|
color: #fff;
|
}
|
// >>> .el-upload {
|
// width: 100%;
|
// height: 100%;
|
// }
|
// >>> .el-upload-dragger {
|
// width: 100%;
|
// height: 100%;
|
// display: flex;
|
// flex-direction: column;
|
// justify-content: center;
|
// }
|
// >>> .el-upload-list {
|
// display: none;
|
// }
|
// >>> .el-upload__tip {
|
// color: #fff;
|
// }
|
</style>
|
