修改车辆设置上传文件的类型

src/views/systemManagement/components/uploadVM.vue

@@ -12,15 +12,15 @@
             :on-error="error"
             :http-request="toUpload"
             :auto-upload="true"
-            :show-file-list="false"
+            :show-file-list="true"
             :file-list="fileList"
             :limit="limit"
             :on-exceed="handleExceed"
             :multiple="multiple"
         >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            <!-- <el-button size="small" type="primary">点击上传</el-button> -->
+            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
+            <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+            <el-button size="small" type="primary">点击上传</el-button>
         </el-upload>
         <!--        <el-button @click="download">下载</el-button>-->
     </div>
@@ -28,12 +28,12 @@
 
 <script>
 export default {
-    name: "upload",
+    name: "uploadVM",
     props: {
         // 限制上传的个数
         limit: {
             type: Number,
-            default: 100,
+            default: 1,
         },
         // 一组文件传相同的值，保证其为一组
         objectPath: {
@@ -73,11 +73,19 @@ export default {
     },
     methods: {
         beforeUpload(file) {
-            // .jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP
-            let arr = ["jpg", "jpeg", "png", "gif", "bmp"];
+            let arr = [];
+
+            if (this.model === "glb") {
+                arr = ["glb"];
+            } else {
+                arr = ["osgb"];
+            }
+
             let i = file.name.lastIndexOf(".");
             if (!arr.includes(file.name.slice(i + 1).toLowerCase())) {
-                this.$message.warning("请上传图片");
+                this.$message.warning(
+                    `请上传${this.model.toUpperCase()}格式的文件`
+                );
                 return false;
             }
         },
@@ -113,7 +121,7 @@ export default {
             // }
 
             this.attachmentList.splice(removeIndex, 1);
-            this.$emit("attachmentChange", this.attachmentList);
+            this.$emit("attachmentDel", this.model);
         },
         async toUpload(file) {
             let _this = this;
@@ -127,7 +135,7 @@ export default {
                 // await formData.append("md5", _this.defaultParam.md5);
                 await formData.append("file", file.file);
 
-                let axios = this.$axios;
+                let axios = this.$instance;
                 // 处理大文件上传 instance已被设置不携带token
                 // if (this.needInstance) {
                 //     axios = this.$instance;
@@ -149,7 +157,17 @@ export default {
                     });
                 } */
 
-                let url = this.$api.systemManagement.upload;
+                let url = "";
+                let timeout = 1000 * 60 * 6;
+
+                if (this.model === "glb") {
+                    url = this.$api.systemManagement.upload;
+                } else {
+                    url = this.$api.common.uploadToLocal;
+                    timeout = 1000 * 60 * 30;
+                }
+
+                // let url = this.$api.systemManagement.upload;
                 // let defaultParam = {};
                 // // 获取MD5值
                 // await this.$md5(file.file).then((res) => {
@@ -163,6 +181,7 @@ export default {
                     method: "post",
                     url,
                     data: formData,
+                    timeout,
                     withCredentials: true,
                     headers: {
                         "Content-type": "multipart/form-data",
@@ -181,11 +200,16 @@ export default {
                             });
                             resolve("成功");
                             this.imageUrl = res.info.previewUrl;
-                            this.$emit(
-                                "attachmentChange",
-                                res.info.fileName,
-                                this.model
-                            );
+
+                            let name = "";
+
+                            if (this.model === "glb") {
+                                name = res.info.fileName;
+                            } else {
+                                name = res.info.filePath;
+                            }
+
+                            this.$emit("attachmentChange", name, this.model);
                             // 上传完成后进行通知
                             this.$emit("didUpload", "success");
                         } else {
@@ -249,6 +273,10 @@ export default {
 </script>
 
 <style lang='less' scoped>
+.avatar-uploader {
+    padding-top: 10px;
+}
+
 .avatar-uploader .el-upload {
     border: 1px dashed #ccc;
     border-radius: 6px;

src/views/systemManagement/vehicleModelDetail.vue

@@ -252,29 +252,46 @@
             <div class="titlePanel">
                 <div class="titlePanelBor">视图</div>
             </div>
-            <div class="tipBox flexBox">
-                <div class="tip">侧视图</div>
-                <div class="tip">俯视图</div>
-            </div>
-            <div class="modelBox flexBox">
-                <div class="uploadBox flexBox">
+
+            <div class="flexBox">
+                <el-form-item label="GLB文件:" prop="vehicleFrontView">
+                    <el-input
+                        placeholder="请输入"
+                        maxlength="120"
+                        v-autoTrim="{ obj: form, key: 'vehicleFrontView' }"
+                        v-model="form.vehicleFrontView"
+                        disabled
+                        :title="form.vehicleFrontView"
+                    >
+                    </el-input>
                     <upload
                         ref="uploadA"
                         :multiple="false"
                         type="vehicleImg"
-                        model="front"
+                        model="glb"
                         @attachmentChange="attachmentChange"
+                        @attachmentDel="attachmentDel"
                     ></upload>
-                </div>
-                <div class="uploadBox flexBox">
+                </el-form-item>
+                <el-form-item label="OSGB文件:" prop="vehicleTopView">
+                    <el-input
+                        placeholder="请输入"
+                        maxlength="120"
+                        v-autoTrim="{ obj: form, key: 'vehicleTopView' }"
+                        v-model="form.vehicleTopView"
+                        disabled
+                        :title="form.vehicleTopView"
+                    >
+                    </el-input>
                     <upload
                         ref="uploadB"
                         :multiple="false"
                         type="vehicleImg"
-                        model="top"
+                        model="osgb"
                         @attachmentChange="attachmentChange"
+                        @attachmentDel="attachmentDel"
                     ></upload>
-                </div>
+                </el-form-item>
             </div>
         </el-form>
 
@@ -511,6 +528,12 @@ export default {
                 wheelDrive: [
                     { required: true, message: "请选择", trigger: "change" },
                 ],
+                vehicleFrontView: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
+                vehicleTopView: [
+                    { required: true, message: "请输入", trigger: "blur" },
+                ],
             },
         };
     },
@@ -527,7 +550,7 @@ export default {
                         !this.form.vehicleFrontView ||
                         !this.form.vehicleTopView
                     ) {
-                        this.$message.error("请先上传图片");
+                        this.$message.error("请先上传文件");
                         return;
                     }
 
@@ -551,11 +574,20 @@ export default {
         cancel() {
             this.$router.push({ path: "/vehicleModelManagement" });
         },
-        attachmentChange(fileName, model) {
-            if (model === "top") {
-                this.form.vehicleTopView = fileName;
+        attachmentChange(name, model) {
+            if (model === "glb") {
+                this.form.vehicleFrontView = name;
+                this.$refs.form.clearValidate("vehicleFrontView");
+            } else {
+                this.form.vehicleTopView = name;
+                this.$refs.form.clearValidate("vehicleTopView");
+            }
+        },
+        attachmentDel(model) {
+            if (model === "glb") {
+                this.form.vehicleFrontView = "";
             } else {
-                this.form.vehicleFrontView = fileName;
+                this.form.vehicleTopView = "";
             }
         },
         getImgUrl(addr) {
@@ -624,16 +656,6 @@ export default {
     }
 }
 
-.modelBox {
-    padding: 20px;
-
-    .uploadBox {
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-    }
-}
-
 .btns {
     padding-top: 30px;
     text-align: center;