perf: 文件查看图片直接弹窗浏览

MetaOrigin · Mar 31, 2022 · dde2813 · dde2813
1 parent ce03296
commit dde2813
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/app/Http/Controllers/Api/FileController.php b/app/Http/Controllers/Api/FileController.php
@@ -90,6 +90,10 @@ public function lists()
                 }
             }
         }
+        // 图片直接返回预览地址
+        foreach ($array as &$item) {
+            File::handleImageUrl($item);
+        }
         return Base::retSuccess('success', $array);
     }
 
@@ -757,6 +761,7 @@ public function content__upload()
             //
             $data = $tmpRow->toArray();
             $data['full_name'] = $webkitRelativePath ?: $data['name'];
+            File::handleImageUrl($data);
             return Base::retSuccess($data['name'] . ' 上传成功', $data);
         });
     }

diff --git a/app/Models/File.php b/app/Models/File.php
@@ -75,6 +75,13 @@ class File extends AbstractModel
         'ppt', 'pptx',
     ];
 
+    /**
+     * 图片文件
+     */
+    const imageExt = [
+        'jpg', 'jpeg', 'png', 'gif', 'bmp'
+    ];
+
     /**
      * 本地媒体文件
      */
@@ -285,6 +292,21 @@ public function pushMsg($action, $data = null, $userid = null)
         Task::deliver($task);
     }
 
+    /**
+     * 处理返回图片地址
+     * @param $item
+     * @return void
+     */
+    public static function handleImageUrl(&$item)
+    {
+        if (in_array($item['ext'], self::imageExt) ) {
+            $content = Base::json2array(FileContent::whereFid($item['id'])->orderByDesc('id')->value('content'));
+            if ($content) {
+                $item['image_url'] = Base::fillUrl($content['url']);
+            }
+        }
+    }
+
     /**
      * 获取文件并检测权限
      * @param $id

diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue
@@ -880,12 +880,23 @@ export default {
                 this.searchKey = '';
                 this.pid = item.id;
             } else {
+                // 图片直接浏览
+                if (item.image_url) {
+                    const list = this.fileList.filter(({image_url}) => !!image_url)
+                    if (list.length > 0) {
+                        this.$store.state.previewImageIndex = list.findIndex(({id}) => item.id === id);
+                        this.$store.state.previewImageList = list.map(item => item.image_url);
+                        return;
+                    }
+                }
+                // 客户端打开独立窗口
                 if (this.$Electron) {
                     this.openSingle(item);
-                } else {
-                    this.fileInfo = item;
-                    this.fileShow = true;
+                    return;
                 }
+                // 正常显示弹窗
+                this.fileInfo = item;
+                this.fileShow = true;
             }
         },