Fixed callback bug in front end file upload & move some constants to config.yaml

web/src/view/example/upload/upload.vue

@@ -1,153 +1,175 @@
 <template>
   <div v-loading.fullscreen.lock="fullscreenLoading">
     <div class="upload">
-    <el-upload
-      :action="`${path}/fileUploadAndDownload/upload`"
-      :before-upload="checkFile"
-      :headers="{'x-token':token}"
-      :on-error="uploadError"
-      :on-success="uploadSuccess"
-      :show-file-list="false"
-    >
-      <el-button size="small" type="primary">点击上传</el-button>
-      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
-    </el-upload>
-    <el-table :data="tableData" border stripe>
-      <el-table-column label="预览" width="100">
-        <template slot-scope="scope">
-          <img :alt="scope.row.alt" :src="scope.row.url" height="80" width="80" />
-        </template>
-      </el-table-column>
-      <el-table-column label="日期" prop="UpdatedAt" width="180">
-        <template slot-scope="scope">
-          <div>{{scope.row.UpdatedAt|formatDate}}</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="文件名" prop="name" width="180"></el-table-column>
-      <el-table-column label="链接" prop="url"></el-table-column>
-      <el-table-column label="标签" prop="tag" width="100">
-        <template slot-scope="scope">
-          <el-tag
-            :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
-            disable-transitions
-          >{{scope.row.tag}}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="100">
-        <template slot-scope="scope">
-          <el-button @click="downloadFile(scope.row)" size="small" type="text">下载</el-button>
-          <el-button @click="deleteFile(scope.row)" size="small" type="text">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-      layout="total, sizes, prev, pager, next, jumper"
-    ></el-pagination>
+      <el-upload
+        :action="`${path}/fileUploadAndDownload/upload`"
+        :before-upload="checkFile"
+        :headers="{ 'x-token': token }"
+        :on-error="uploadError"
+        :on-success="uploadSuccess"
+        :show-file-list="false"
+      >
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div class="el-upload__tip" slot="tip">
+          只能上传jpg/png文件，且不超过500kb
+        </div>
+      </el-upload>
+      <el-table :data="tableData" border stripe>
+        <el-table-column label="预览" width="100">
+          <template slot-scope="scope">
+            <img
+              :alt="scope.row.alt"
+              :src="scope.row.url"
+              height="80"
+              width="80"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="日期" prop="UpdatedAt" width="180">
+          <template slot-scope="scope">
+            <div>{{ scope.row.UpdatedAt | formatDate }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="文件名"
+          prop="name"
+          width="180"
+        ></el-table-column>
+        <el-table-column label="链接" prop="url"></el-table-column>
+        <el-table-column label="标签" prop="tag" width="100">
+          <template slot-scope="scope">
+            <el-tag
+              :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
+              disable-transitions
+              >{{ scope.row.tag }}</el-tag
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button @click="downloadFile(scope.row)" size="small" type="text"
+              >下载</el-button
+            >
+            <el-button @click="deleteFile(scope.row)" size="small" type="text"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-size="pageSize"
+        :page-sizes="[10, 30, 50, 100]"
+        :style="{ float: 'right', padding: '20px' }"
+        :total="total"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
     </div>
   </div>
 </template>
-   
+
 <script>
-const path = process.env.VUE_APP_BASE_API
-import { mapGetters } from 'vuex'
-import infoList from '@/components/mixins/infoList'
-import { getFileList, deleteFile } from '@/api/fileUploadAndDownload'
-import { downloadImage } from '@/utils/downloadImg'
-import { formatTimeToStr } from '@/utils/data'
+const path = process.env.VUE_APP_BASE_API;
+import { mapGetters } from "vuex";
+import infoList from "@/components/mixins/infoList";
+import { getFileList, deleteFile } from "@/api/fileUploadAndDownload";
+import { downloadImage } from "@/utils/downloadImg";
+import { formatTimeToStr } from "@/utils/data";
 export default {
-  name: 'Upload',
+  name: "Upload",
   mixins: [infoList],
   data() {
     return {
-      fullscreenLoading:false,
+      fullscreenLoading: false,
       listApi: getFileList,
       path: path,
-      tableData: []
-    }
+      tableData: [],
+    };
   },
   computed: {
-    ...mapGetters('user', ['userInfo', 'token'])
+    ...mapGetters("user", ["userInfo", "token"]),
   },
   filters: {
     formatDate: function(time) {
-      if (time != null && time != '') {
-        var date = new Date(time)
-        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
+      if (time != null && time != "") {
+        var date = new Date(time);
+        return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
       } else {
-        return ''
+        return "";
       }
-    }
+    },
   },
   methods: {
     async deleteFile(row) {
-      this.$confirm('此操作将永久文件, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm("此操作将永久文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
         .then(async () => {
-          const res = await deleteFile(row)
+          const res = await deleteFile(row);
           if (res.code == 0) {
             this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            this.getTableData()
+              type: "success",
+              message: "删除成功!",
+            });
+            this.getTableData();
           }
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
+            type: "info",
+            message: "已取消删除",
+          });
+        });
     },
     checkFile(file) {
-      this.fullscreenLoading = true
-      const isJPG = file.type === 'image/jpeg'
-      const isPng = file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
+      this.fullscreenLoading = true;
+      const isJPG = file.type === "image/jpeg";
+      const isPng = file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
       if (!isJPG && !isPng) {
-        this.$message.error('上传头像图片只能是 JPG或png 格式!')
-        this.fullscreenLoading = false
+        this.$message.error("上传头像图片只能是 JPG或png 格式!");
+        this.fullscreenLoading = false;
       }
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-        this.fullscreenLoading = false
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+        this.fullscreenLoading = false;
       }
-      return (isPng || isJPG) && isLt2M
+      return (isPng || isJPG) && isLt2M;
     },
     uploadSuccess(res) {
-      this.$message({
-        type: 'success',
-        message: '上传成功'
-      })
+      this.fullscreenLoading = false;
       if (res.code == 0) {
-        this.getTableData()
+        this.$message({
+          type: "success",
+          message: "上传成功",
+        });
+        if (res.code == 0) {
+          this.getTableData();
+        }
+      } else {
+        this.$message({
+          type: "warning",
+          message: res.msg,
+        });
       }
-        this.fullscreenLoading = false
     },
     uploadError() {
       this.$message({
-        type: 'error',
-        message: '上传失败'
-      })
-        this.fullscreenLoading = false
-
+        type: "error",
+        message: "上传失败",
+      });
+      this.fullscreenLoading = false;
     },
     downloadFile(row) {
-      downloadImage(row.url, row.name)
-    }
+      downloadImage(row.url, row.name);
+    },
   },
-  created(){
-    this.getTableData()
-  }
-}
-</script>
+  created() {
+    this.getTableData();
+  },
+};
+</script>