From e9ff54ecf5c5f4d1445b16f3fe5af0d21d93f28b Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Mon, 16 Sep 2024 08:31:28 -0400
Subject: [PATCH] fix: image loading with access-token

---
 frontend/src/components/PostCard.vue | 43 ++++++++++++++++++++--------
 frontend/src/pages/post.vue          | 17 ++++++++++-
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/PostCard.vue b/frontend/src/components/PostCard.vue
index ffbe60d..eb7cab3 100644
--- a/frontend/src/components/PostCard.vue
+++ b/frontend/src/components/PostCard.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-card class="mx-auto postcard" :color="post.status in colorMap ? colorMap[post.status] : '#9e9e9e'" max-width="400" style="border-radius: 10px; color: #fff">
+  <v-card class="mx-auto postcard" :color="post.status in colorMap ? colorMap[post.status] : '#9e9e9e'" max-width="400"
+    style="border-radius: 10px; color: #fff">
     <div style="width: 100%; padding: 8px 8px 0px 8px">
       <div style="display: flex; align-items: center; justify-content: space-between;">
         <div style="display: flex; align-items: center;">
@@ -19,7 +20,7 @@
 
     <div
       style="display: flex; margin-left: 16px; margin-right: 16px; margin-top: 8px; overflow-x: auto; white-space: nowrap;">
-      <img v-for="img in post.images" :key="img" :src="img"
+      <img v-for="img in postImageBlobs" :key="img" :src="img"
         style="border-radius: 10px; margin-right: 8px; width: 100px; height: 100px; object-fit: cover" />
     </div>
 
@@ -31,8 +32,8 @@
         </template>
 
         <v-list-item-title v-if="!post.anon">{{ post.uin }}</v-list-item-title>
-        <v-list-item-title v-if="post.anon && typ==='self'">匿名</v-list-item-title>
-        <v-list-item-title v-if="post.anon && typ!=='self'">匿名({{ post.uin }})</v-list-item-title>
+        <v-list-item-title v-if="post.anon && typ === 'self'">匿名</v-list-item-title>
+        <v-list-item-title v-if="post.anon && typ !== 'self'">匿名({{ post.uin }})</v-list-item-title>
 
         <v-list-item-subtitle>{{ post.created_at }}</v-list-item-subtitle>
 
@@ -55,7 +56,9 @@
                 </v-list-item>
               </v-list>
             </v-menu>
-            <span @click="showLogs" v-else class="subheading" style="font-weight: bold; text-decoration: underline">{{ post.status }}</span>
+            <span @click="showLogs" v-else class="subheading" style="font-weight: bold; text-decoration: underline">{{
+              post.status
+              }}</span>
 
           </div>
         </template>
@@ -64,8 +67,7 @@
   </v-card>
 
   <v-dialog v-model="dialog" variant="outlined" persistent>
-    <v-card
-      title="拒绝原因">
+    <v-card title="拒绝原因">
       <v-card-text>
         <v-text-field v-model="reason" label="拒绝原因" outlined></v-text-field>
       </v-card-text>
@@ -77,10 +79,9 @@
   </v-dialog>
 
   <v-dialog v-model="logDialog" variant="outlined" persistent>
-    <v-card
-      title="日志">
+    <v-card title="日志">
       <v-card-text>
-        <div class="logCard" v-for="(l,index) in log" :key="index">
+        <div class="logCard" v-for="(l, index) in log" :key="index">
           <h3>{{ l.comment }}</h3>
           <p><strong>时间: </strong>{{ l.created_at }}</p>
           <p v-if="l.op !== -1 && typ != 'self'"><strong>操作者: </strong>{{ l.op }}</p>
@@ -102,7 +103,7 @@ export default {
     return {
       dialog: false,
       reason: "",
-
+      postImageBlobs: [],
       filterStatus: ['通过', '拒绝', '无理由拒绝'],
       avatarBaseUrl: "http://q1.qlogo.cn/g?b=qq&nk=",
       logDialog: false,
@@ -115,10 +116,12 @@ export default {
         '队列中': '#9Cbb85',
         '已发布': '#42A5F5',
         '失败': '#aa8888',
-      }
+      },
+      
     }
   },
   mounted() {
+    this.fetchImages()
   },
   methods: {
     recall() {
@@ -138,6 +141,22 @@ export default {
       this.post.reason = this.reason
       this.$emit('updateJudgePost', this.post)
     },
+    fetchImages() {
+      for (let i = 0; i < this.post.images.length; i++) {
+        this.fetchImageBlob(this.post.images[i])
+      }
+    },
+    fetchImageBlob(url) {
+      this.$axios.get(url, {
+        responseType: 'blob'
+      })
+        .then(res => {
+          this.postImageBlobs.push(URL.createObjectURL(res.data))
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
     showLogs() {
       this.$axios.get('/v1/post/post-log/' + this.post.id)
         .then(res => {
diff --git a/frontend/src/pages/post.vue b/frontend/src/pages/post.vue
index ec7cc29..b35ff2e 100644
--- a/frontend/src/pages/post.vue
+++ b/frontend/src/pages/post.vue
@@ -39,7 +39,7 @@
         </div>
 
         <div style="margin-left: 16px; display: flex; flex-wrap: wrap;">
-            <img v-for="(image, index) in post.images" :src="image" :key="index" width="70" height="70"
+            <img v-for="(image, index) in postImageBlobs" :src="image" :key="index" width="70" height="70"
                 style="margin-right: 8px; margin-top:4px; border-radius: 10px;"
                 @click="selectedIndex = index; showDeleteImageDialog = true">
             <svg style="margin-top: 8px" @click="selectImage" t="1712897639010" class="icon" viewBox="0 0 1024 1024"
@@ -159,6 +159,7 @@ export default {
                 anon: false,
                 images: [],
             },
+            postImageBlobs: [],
             tags: [
                 {
                     name: '寻物/招领',
@@ -220,6 +221,7 @@ export default {
                 return
             }
             this.post.images.splice(index, 1)
+            this.postImageBlobs.splice(index, 1)
         },
         generateUUID4() {
             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -248,6 +250,7 @@ export default {
                         this.toast('🥰 投稿成功', 'success')
                         this.post.text = ''
                         this.post.images = []
+                        this.postImageBlobs = []
                         this.tags.forEach(tag => {
                             tag.selected = false
                         })
@@ -286,6 +289,7 @@ export default {
                             let url = this.$store.state.base_url + '/v1/post/download-image/' + res.data.data.key
                             console.log(url)
                             this.post.images.push(url)
+                            this.fetchLatestImageToImageBlobs(url)
                             this.loading = false
                         } else {
                             this.toast('上传失败：' + res.data.msg)
@@ -300,6 +304,17 @@ export default {
             }
             input.click()
         },
+        fetchLatestImageToImageBlobs(url) {
+            this.$axios.get(url, {
+                responseType: 'blob'
+            })
+                .then(res => {
+                    this.postImageBlobs.push(URL.createObjectURL(res.data))
+                })
+                .catch(err => {
+                    console.error(err)
+                })
+        },
         selectTag(index) {
             this.toast("标签功能暂时关闭", "warning")
             this.tags[index].selected = !this.tags[index].selected