:bug:由于mock无法模拟上传功能固变更为真实上传地址、移除webstorm自动构建http request功能

http/mock.http

-
-###/changeLog/getList###mockServer
-POST http://localhost:80/mock-server/changeLog/getList
-Content-Type: application/x-www-form-urlencoded
-###
-mockServer
-###/colorfulIcon/list###
-POST http://localhost:80/mock-server/colorfulIcon/list
-Content-Type: application/x-www-form-urlencoded
-###mockServer
-
-###/menu/navigate###
-POST http://localhost:80/mock-server/menu/navigate
-Content-Type: application/x-www-form-urlenmockServer
-###
-
-###/icon/list###
-POST http://localhost:80/mock-server/icon/mockServer
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/face/list###mockServer
-POST http://localhost:80/mock-server/face/list
-Content-Type: application/x-www-form-urlencoded
-###
-mockServer
-###/table/list###
-POST http://localhost:80/mock-server/table/list
-Content-Type: application/x-www-form-urlencoded
-###mockServer
-
-###/remixicon/getList###
-POST http://localhost:80/mock-server/remixicon/getList
-Content-Type: application/x-www-form-urlenmockServer
-###
-
-###/publicKey###
-POST http://localhost:80/mock-server/pumockServer
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/tree/list###mockServer
-POST http://localhost:80/mock-server/tree/list
-Content-Type: application/x-www-form-urlencoded
-###
-mockServer
-###/upload###
-POST http://localhost:80/mock-server/upload
-Content-Type: application/x-www-form-urlencoded
-###mockServer
-
-###/login###
-POST http://localhost:80/mock-server/login
-Content-Type: application/x-www-form-urlenmockServer
-###
-
-###/waterfall/list###
-POST http://localhost:80/mock-server/waterfall/list
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/logout###
-POST http://localhost:80/mock-server/logout
-Content-Type: application/x-www-form-urlencoded
-###
-
-###/userInfo###
-POST http://localhost:80/mock-server/userInfo
-Content-Type: application/x-www-form-urlencoded
-###

mock/controller/upload.js

-const data = [];
-module.exports = [
-  {
-    url: "/upload",
-    type: "post",
-    response() {
-      return {
-        code: 200,
-        msg: "success",
-        data: data,
-      };
-    },
-  },
-];

mock/index.js

 /**
- * @copyright chuzhixin 1204505056@qq.com
+ * @author chuzhixin 1204505056@qq.com
  * @description 导入所有 controller 模块，npm run serve时在node环境中自动输出controller文件夹下Mock接口，请勿修改。
  */
 

mock/mockServer.js

@@ -70,7 +70,6 @@ module.exports = (app) => {
   let mockStartIndex = mockRoutes.mockStartIndex;
   chokidar
     .watch(mockDir, {
-      ignored: /mock-server/,
       ignoreInitial: true,
     })
     .on("all", (event) => {

package.json

@@ -50,6 +50,7 @@
     "lodash": "^4.17.20",
     "maptalks": "^0.49.1",
     "mapv": "^2.0.57",
+    "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "qs": "^6.9.4",
     "screenfull": "^5.0.2",
@@ -72,24 +73,23 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.6",
     "@vue/cli-plugin-eslint": "^4.5.6",
-    "@vue/cli-plugin-router": "^4.5.6",
-    "@vue/cli-plugin-vuex": "^4.5.6",
     "@vue/cli-service": "^4.5.6",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
+    "body-parser": "^1.19.0",
+    "chalk": "^4.1.0",
+    "chokidar": "^3.4.2",
     "compression-webpack-plugin": "^6.0.2",
     "eslint": "^7.10.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.0.0",
     "filemanager-webpack-plugin": "^2.0.5",
-    "image-webpack-loader": "^7.0.1",
     "lint-staged": "^10.4.0",
-    "mockjs": "^1.1.0",
     "plop": "^2.7.4",
     "prettier": "^2.1.2",
+    "raw-loader": "^4.0.1",
     "sass": "^1.26.11",
     "sass-loader": "^10.0.2",
-    "script-loader": "^0.7.2",
     "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recess-order": "^2.1.0",

src/components/VabUpload/index.vue

 <template>
   <el-dialog
+    :before-close="handleClose"
+    :close-on-click-modal="false"
     :title="title"
     :visible.sync="dialogFormVisible"
     width="909px"
-    :before-close="handleClose"
-    :close-on-click-modal="false"
   >
     <div class="upload">
       <el-alert
@@ -15,34 +15,34 @@
       <br />
       <el-upload
         ref="upload"
-        class="upload-content"
-        :name="name"
-        :data="data"
         :action="action"
+        :auto-upload="false"
+        :close-on-click-modal="false"
+        :data="data"
+        :file-list="fileList"
         :headers="headers"
+        :limit="limit"
+        :multiple="true"
+        :name="name"
         :on-change="handleChange"
+        :on-error="handleError"
+        :on-exceed="handleExceed"
         :on-preview="handlePreview"
+        :on-progress="handleProgress"
         :on-remove="handleRemove"
-        :on-exceed="handleExceed"
         :on-success="handleSuccess"
-        :on-progress="handleProgress"
-        :on-error="handleError"
-        :file-list="fileList"
-        :multiple="true"
-        :auto-upload="false"
         accept="image/png, image/jpeg"
-        :limit="limit"
+        class="upload-content"
         list-type="picture-card"
-        :close-on-click-modal="false"
       >
         <i slot="trigger" class="el-icon-plus"></i>
         <el-dialog
-          title="查看大图"
-          append-to-body
           :visible.sync="dialogVisible"
+          append-to-body
+          title="查看大图"
         >
-          <div style="padding-bottom: 20px !important">
-            <img width="100%" :src="dialogImageUrl" alt="" />
+          <div>
+            <img :src="dialogImageUrl" alt="" width="100%" />
           </div>
         </el-dialog>
       </el-upload>
@@ -62,10 +62,10 @@
       </div>
       <el-button type="primary" @click="handleClose">关闭</el-button>
       <el-button
-        style="margin-left: 10px"
+        :loading="loading"
         size="small"
+        style="margin-left: 10px"
         type="success"
-        :loading="loading"
         @click="submitUpload"
       >
         开始上传
@@ -75,7 +75,7 @@
 </template>
 
 <script>
-  import { tokenName } from "@/config/settings";
+  import { baseURL, tokenName } from "@/config/settings";
 
   export default {
     name: "VabUpload",
@@ -107,7 +107,7 @@
         loading: false,
         dialogVisible: false,
         dialogImageUrl: "",
-        action: "",
+        action: "https://vab-unicloud-3a9da9.service.tcloudbase.com/upload",
         headers: {},
         fileList: [],
         picture: "picture",
@@ -126,16 +126,6 @@
         return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
       },
     },
-    created() {
-      if ("development" === process.env.NODE_ENV) {
-        this.api = process.env.VUE_APP_BASE_API;
-      } else {
-        this.api = `${window.location.protocol}//${window.location.host}`;
-      }
-
-      this.action = this.api + this.url;
-      this.headers[tokenName] = this.$baseAccessToken();
-    },
     methods: {
       submitUpload() {
         this.$refs.upload.submit();
@@ -161,7 +151,6 @@
         this.imgSuccessNum = this.imgSuccessNum + 1;
         if (fileList.length === this.imgNum) {
           setTimeout(() => {
-            this.$emit("fetch-datas");
             this.$baseMessage(
               `上传完成! 共上传${fileList.length}张图片`,
               "success"
@@ -217,14 +206,13 @@
         this.imgNum = 0;
         this.imgSuccessNum = 0;
         this.imgErrorNum = 0;
-        if ("development" === process.env.NODE_ENV) {
+        /* if ("development" === process.env.NODE_ENV) {
           this.api = process.env.VUE_APP_BASE_API;
         } else {
           this.api = `${window.location.protocol}//${window.location.host}`;
         }
 
-        this.action = this.api + this.url;
-        this.headers[tokenName] = this.$baseAccessToken();
+        this.action = this.api + this.url; */
         this.dialogFormVisible = false;
       },
     },
@@ -233,7 +221,7 @@
 
 <style lang="scss" scoped>
   .upload {
-    height: 600px;
+    height: 500px;
 
     .upload-content {
       .el-upload__tip {

src/config/settings.js

@@ -79,9 +79,7 @@ module.exports = {
   //是否开启登录拦截
   loginInterception: true,
   //是否开启登录RSA加密
-  loginRSA: true,
-  //是否依据mock数据生成webstorm HTTP Request请求文件
-  httpRequestFile: false,
+  loginRSA: false,
   //intelligence和all两种方式，前者后端权限只控制permissions不控制view文件的import（前后端配合，减轻后端工作量），all方式完全交给后端前端只负责加载
   authentication: "intelligence",
   //vertical布局时是否只保持一个子菜单的展开

src/main.js

@@ -9,7 +9,7 @@ import "./plugins";
  */
 
 if (process.env.NODE_ENV === "production") {
-  const { mockXHR } = require("@/config/static");
+  const { mockXHR } = require("@/utils/static");
   mockXHR();
 }
 

src/config/static.js → src/utils/static.js

 /**
- * @copyright chuzhixin 1204505056@qq.com
+ * @author chuzhixin 1204505056@qq.com
  * @description 导入所有 controller 模块，浏览器环境中自动输出controller文件夹下Mock接口，请勿修改。
  */
 import Mock from "mockjs";
-import { paramObj } from "@/utils";
+import { paramObj } from "@/utils/index";
 
 const mocks = [];
 const files = require.context("../../mock/controller", false, /\.js$/);
 
 files.keys().forEach((key) => {
-  const obj = files(key);
-  mocks.push(...obj);
+  mocks.push(...files(key));
 });
 
 export function mockXHR() {
@@ -26,9 +25,9 @@ export function mockXHR() {
     this.proxy_send(...arguments);
   };
 
-  function XHR2ExpressReqWrap(respond) {
+  function XHRHttpRequst(respond) {
     return function (options) {
-      let result = null;
+      let result;
       if (respond instanceof Function) {
         const { body, type, url } = options;
         result = respond({
@@ -43,11 +42,11 @@ export function mockXHR() {
     };
   }
 
-  for (const i of mocks) {
+  mocks.forEach((item) => {
     Mock.mock(
-      new RegExp(i.url),
-      i.type || "get",
-      XHR2ExpressReqWrap(i.response)
+      new RegExp(item.url),
+      item.type || "get",
+      XHRHttpRequst(item.response)
     );
-  }
+  });
 }