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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
| <template>
| <div class="main">
| <el-upload
| class="upload"
| action=""
| drag
| :auto-upload="false"
| :on-change="change"
| @drop.native="drop"
| accept=".fbx,.fbxc"
| >
| <!-- <i class="icon el-icon-plus"></i> -->
| <div ref="tt" class="el-upload__text">
| 将.fbx或.fbxc文件拖到此处，或点击此处选择文件
| </div>
| <div class="el-upload__tip" slot="tip">只能解析.fbx和.fbxc文件</div>
| </el-upload>
| </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(file) {
| if (!/\.fbxc?$/.test(file.name.toLowerCase().trim())) {
| this.$layer.msg("文件类型错误");
| return false;
| }
| let loading = this.$layer.loading(1);
| axios({
| url: "readFboFile",
| method: "GET",
| params: {
| filePath: file.path,
| },
| }).then((res) => {
| let {
| code,
| data,
| } = res.data;
| // console.log(res, res.code, "=========res");
| this.$layer.close(loading);
| if (code) {
| 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() {
| if (this.reselect) {
| this.$refs.tt.click();
| }
| },
| };
| </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;
| }
| >>> .el-upload__tip {
| color: #fff;
| }
| </style>
|
|
