Laravel-Vue中Vuefinder选中文件事件失效，如何获取选中文件？

问题原因 #

官方文档提到的select事件在当前版本的Vuefinder源码中并未实现，所以绑定@select不会有任何响应。但框架内部通过vf-nodes-selected事件同步选中项数量，我们可以利用这个内部事件来获取选中的文件数据。

解决方案步骤 #

1. 给Vuefinder组件添加ref引用
   修改模板代码，添加ref属性以便获取组件实例：

   <vue-finder ref="vuefinder" id='my_vuefinder' url="/files"></vue-finder>
   

2. 监听内部vf-nodes-selected事件
   根据你使用的Vue版本，在组件的生命周期钩子中监听该事件：

   Vue3 示例

   import { onMounted, onUnmounted, ref } from 'vue';
   
   export default {
     setup() {
       const vuefinder = ref(null);
   
       onMounted(() => {
         if (vuefinder.value) {
           vuefinder.value.emitter.on('vf-nodes-selected', (items) => {
             // items为选中文件的数组，每个元素包含url、name、id等信息
             console.log('选中文件列表:', items);
             // 这里可将文件数据传递给TinyMCE/CKEditor
             // 例如取第一个选中文件的地址插入编辑器
             if (items.length > 0) {
               const targetUrl = items[0].url;
               // 执行编辑器插入逻辑，比如tinymce.activeEditor.insertContent(`<img src="${targetUrl}">`)
             }
           });
         }
       });
   
       // 组件销毁时移除事件监听，避免内存泄漏
       onUnmounted(() => {
         if (vuefinder.value) {
           vuefinder.value.emitter.off('vf-nodes-selected');
         }
       });
   
       return { vuefinder };
     }
   }
   

   Vue2 示例

   export default {
     mounted() {
       this.$refs.vuefinder.emitter.on('vf-nodes-selected', (items) => {
         console.log('选中文件列表:', items);
         // 处理编辑器插入逻辑
         if (items.length > 0) {
           const targetUrl = items[0].url;
           // 示例：CKEditor插入图片
           // CKEDITOR.instances.editor1.insertHtml(`<img src="${targetUrl}">`);
         }
       });
     },
     beforeDestroy() {
       // 移除事件监听
       this.$refs.vuefinder.emitter.off('vf-nodes-selected');
     }
   }
   

说明 #

• items数组中的每个对象包含文件的完整信息，你可以根据需求提取url、name、size等字段。
• 必须在组件销毁时移除事件监听，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Mojtaba