upload way to upload image in admin system

hichina-admin-front/src/pages/BloghomeManagePage.vue

@@ -1,5 +1,22 @@
 <template>
   <q-page padding>
+    <q-dialog v-model="imageUploadBox">
+      <q-card>
+        <q-card-section style="width: 300px" class="row items-center q-pb-none">
+          <div class="text-h6">图片上传</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+
+        <q-card-section>
+          <upload-image
+            :processImage="customProcessImage"
+            :removeImage="customRemoveImage"
+            @update-urls="customHandleUpdatedUrls"
+          ></upload-image>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
     <q-btn
       round
       title="增加一张"
@@ -28,6 +45,12 @@
       v-for="index in numberofslides"
       :key="index"
     >
+      <q-btn
+        color="deep-orange"
+        glossy
+        label="上传滚动图"
+        @click="uploadImage(index)"
+      />
       <q-input
         label="滚动图URL"
         v-model="sliders[index - 1]['imageUrl']"
@@ -61,8 +84,12 @@
 <script>
 import { api } from "boot/axios";
 import { useQuasar } from "quasar";
+import UploadImage from "v-upload-image";
 export default {
   name: "BloghomeManagePage",
+  components: {
+    "upload-image": UploadImage,
+  },
   setup() {
     const $q = useQuasar();
 
@@ -86,6 +113,8 @@ export default {
   },
   data() {
     return {
+      imageUploadBox: false,
+      currentSelectedIndex: 0,
       numberofslides: 3,
       sliders: [
         { imageUrl: "", title: "", subTitle: "", linkToBlog: "" },
@@ -98,6 +127,27 @@ export default {
     this.loadExistingBlogSliders();
   },
   methods: {
+    async customProcessImage(image) {
+      const formData = new FormData();
+      formData.append("expectedType", "blogImage");
+      formData.append("imageFile", image);
+      api
+        .post("/api/v1/image/upload", formData)
+        .then((response) => {
+          this.showNotifyMessageSucceed("成功插入图片");
+          this.imageUploadBox = false;
+          this.sliders[this.currentSelectedIndex - 1]["imageUrl"] =
+            response.data.data;
+          return { imageId: "somefake", imageUrl: response.data.data };
+        })
+        .catch((e) => {
+          this.showNotifyMessageFail(e.toString());
+        });
+    },
+    uploadImage(index) {
+      this.imageUploadBox = true;
+      this.currentSelectedIndex = index;
+    },
     loadExistingBlogSliders() {
       api
         .get("/api/v1/pagecontent/bloghomeliders")

hichina-admin-front/src/pages/GuidebookIntroManagePage.vue

@@ -1,5 +1,22 @@
 <template>
   <q-page padding>
+    <q-dialog v-model="imageUploadBox">
+      <q-card>
+        <q-card-section style="width: 300px" class="row items-center q-pb-none">
+          <div class="text-h6">图片上传</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+
+        <q-card-section>
+          <upload-image
+            :processImage="customProcessImage"
+            :removeImage="customRemoveImage"
+            @update-urls="customHandleUpdatedUrls"
+          ></upload-image>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
     <q-btn
       round
       title="增加一张"
@@ -28,6 +45,12 @@
       v-for="index in numberofslides"
       :key="index"
     >
+      <q-btn
+        color="deep-orange"
+        glossy
+        label="上传滚动图"
+        @click="uploadImage(index)"
+      />
       <q-input
         label="滚动图URL"
         v-model="sliders[index - 1]['imageUrl']"
@@ -51,8 +74,12 @@
 <script>
 import { api } from "boot/axios";
 import { useQuasar } from "quasar";
+import UploadImage from "v-upload-image";
 export default {
   name: "GuidebookIntroManagePage",
+  components: {
+    "upload-image": UploadImage,
+  },
   setup() {
     const $q = useQuasar();
 
@@ -76,6 +103,8 @@ export default {
   },
   data() {
     return {
+      imageUploadBox: false,
+      currentSelectedIndex: 0,
       numberofslides: 1,
       sliders: [{ imageUrl: "", linkTo: "" }],
     };
@@ -84,6 +113,27 @@ export default {
     this.loadExistingGuidebookIntroSliders();
   },
   methods: {
+    async customProcessImage(image) {
+      const formData = new FormData();
+      formData.append("expectedType", "blogImage");
+      formData.append("imageFile", image);
+      api
+        .post("/api/v1/image/upload", formData)
+        .then((response) => {
+          this.showNotifyMessageSucceed("成功插入图片");
+          this.imageUploadBox = false;
+          this.sliders[this.currentSelectedIndex - 1]["imageUrl"] =
+            response.data.data;
+          return { imageId: "somefake", imageUrl: response.data.data };
+        })
+        .catch((e) => {
+          this.showNotifyMessageFail(e.toString());
+        });
+    },
+    uploadImage(index) {
+      this.imageUploadBox = true;
+      this.currentSelectedIndex = index;
+    },
     loadExistingGuidebookIntroSliders() {
       api
         .get("/api/v1/pagecontent/guidebookintrosliders")

hichina-admin-front/src/pages/HomePostPage.vue

@@ -1,5 +1,22 @@
 <template>
   <q-page padding>
+    <q-dialog v-model="imageUploadBox">
+      <q-card>
+        <q-card-section style="width: 300px" class="row items-center q-pb-none">
+          <div class="text-h6">图片上传</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+
+        <q-card-section>
+          <upload-image
+            :processImage="customProcessImage"
+            :removeImage="customRemoveImage"
+            @update-urls="customHandleUpdatedUrls"
+          ></upload-image>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
     <q-btn
       color="primary"
       style="margin-left: 40px"
@@ -10,6 +27,12 @@
       class="row justify-left"
       style="margin-top: 50px; border-style: dotted"
     >
+      <q-btn
+        color="deep-orange"
+        glossy
+        label="上传滚动图"
+        @click="uploadImage(index)"
+      />
       <q-input
         label="海报图url"
         v-model="postImageUrl"
@@ -26,9 +49,13 @@
 
 <script>
 import { api } from "boot/axios";
+import UploadImage from "v-upload-image";
 import { useQuasar } from "quasar";
 export default {
   name: "HomePostPage",
+  components: {
+    "upload-image": UploadImage,
+  },
   setup() {
     const $q = useQuasar();
 
@@ -51,6 +78,26 @@ export default {
     };
   },
   methods: {
+    async customProcessImage(image) {
+      const formData = new FormData();
+      formData.append("expectedType", "blogImage");
+      formData.append("imageFile", image);
+      api
+        .post("/api/v1/image/upload", formData)
+        .then((response) => {
+          this.showNotifyMessageSucceed("成功插入图片");
+          this.imageUploadBox = false;
+          this.postImageUrl = response.data.data;
+          return { imageId: "somefake", imageUrl: response.data.data };
+        })
+        .catch((e) => {
+          this.showNotifyMessageFail(e.toString());
+        });
+    },
+    uploadImage(index) {
+      this.imageUploadBox = true;
+      this.currentSelectedIndex = index;
+    },
     submitPost() {
       var params = {};
       params.postImageUrl = this.postImageUrl;
@@ -89,6 +136,7 @@ export default {
   },
   data() {
     return {
+      imageUploadBox: false,
       postImageUrl: "",
       postLink: "",
     };

hichina-admin-front/src/pages/HomeSlideImagePage.vue

@@ -1,5 +1,22 @@
 <template>
   <q-page padding>
+    <q-dialog v-model="imageUploadBox">
+      <q-card>
+        <q-card-section style="width: 300px" class="row items-center q-pb-none">
+          <div class="text-h6">图片上传</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+
+        <q-card-section>
+          <upload-image
+            :processImage="customProcessImage"
+            :removeImage="customRemoveImage"
+            @update-urls="customHandleUpdatedUrls"
+          ></upload-image>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
     <q-btn
       round
       title="增加一张"
@@ -28,6 +45,12 @@
       v-for="index in numberofslides"
       :key="index"
     >
+      <q-btn
+        color="deep-orange"
+        glossy
+        label="上传滚动图"
+        @click="uploadImage(index)"
+      />
       <q-input
         label="滚动图URL"
         v-model="sliders[index - 1]['imageUrl']"
@@ -61,7 +84,11 @@
 <script>
 import { api } from "boot/axios";
 import { useQuasar } from "quasar";
+import UploadImage from "v-upload-image";
 export default {
+  components: {
+    "upload-image": UploadImage,
+  },
   name: "HomeSlideImagePage",
   setup() {
     const $q = useQuasar();
@@ -87,6 +114,8 @@ export default {
   data() {
     return {
       numberofslides: 3,
+      currentSelectedIndex: 0,
+      imageUploadBox: false,
       sliders: [
         { imageUrl: "", title: "", subTitle: "", linkToBlog: "" },
         { imageUrl: "", title: "", subTitle: "", linkToBlog: "" },
@@ -98,6 +127,27 @@ export default {
     this.loadExistingHomeSliders();
   },
   methods: {
+    async customProcessImage(image) {
+      const formData = new FormData();
+      formData.append("expectedType", "blogImage");
+      formData.append("imageFile", image);
+      api
+        .post("/api/v1/image/upload", formData)
+        .then((response) => {
+          this.showNotifyMessageSucceed("成功插入图片");
+          this.imageUploadBox = false;
+          this.sliders[this.currentSelectedIndex - 1]["imageUrl"] =
+            response.data.data;
+          return { imageId: "somefake", imageUrl: response.data.data };
+        })
+        .catch((e) => {
+          this.showNotifyMessageFail(e.toString());
+        });
+    },
+    uploadImage(index) {
+      this.imageUploadBox = true;
+      this.currentSelectedIndex = index;
+    },
     loadExistingHomeSliders() {
       api
         .get("/api/v1/pagecontent/homesliders")

hichina-admin-front/src/pages/LoginPage.vue

@@ -94,7 +94,7 @@ export default {
         .catch((e) => {
           console.log("login failed");
           console.log(e);
-          showNotifyMessageFail(e);
+          this.showNotifyMessageFail(e);
         });
     },
     logout() {