1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
| <template>
| <div class="main">
| <el-upload
| class="upload"
| action=""
| drag
| :auto-upload="false"
| :on-change="change"
| @drop.native="drop"
| accept=".fbx"
| >
| <!-- <i class="icon el-icon-plus"></i> -->
| <div class="el-upload__text">将.fbx文件拖到此处，或点击此处选择文件</div>
| <div class="el-upload__tip" slot="tip">只能解析.fbx文件</div>
| </el-upload>
| </div>
| </template>
|
| <script>
| import axios from "@/assets/js/axios";
|
| export default {
| name: "",
|
| data() {
| return {
| URL: "",
| };
| },
| 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(file) {
| if (!/\.fbx$/.test(file.name.toLowerCase().trim())) {
| this.$layer.msg("类型错误");
| return false;
| }
| axios({
| url: "readFboFile",
| method: "POST",
| params: {
| filePath: file.path,
| },
| }).then((res) => {
| res = res.data;
| console.log(res, res.code, "=========res");
| if (res.code) {
| let data = res.data;
| data.filePath = file.path;
| // 解析成功 跳转到结果页面
| this.$router.push({
| path: "/result",
| query: {
| data,
| },
| });
| }
| });
| },
| drop(e) {
| // console.log(e);
| //必须要阻止拖拽的默认事件
| e.preventDefault();
| e.stopPropagation();
|
| //获得拖拽的文件集合
| var files = e.dataTransfer.files;
| console.log(files);
| if (!files) {
| return false;
| }
| this.loadFile(files[0]);
| },
| },
|
| mounted() {},
| };
| </script>
|
| <style scoped>
| .main {
| height: 100%;
| display: flex;
| justify-content: center;
| align-items: center;
| }
| .upload {
| /* flex: 1; */
| width: 80%;
| height: 80%;
| display: flex;
| flex-direction: column;
| text-align: center;
| }
| >>> .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;
| }
| </style>
|
|
