解决多图片上传域粘贴图片冲突的最佳实践

2024-11-11 03:45:08

页面中多个图片上传域的粘贴图片处理

在同一个页面中包含多个图片上传域时，直接粘贴图片可能会导致所有上传域都接收到相同的图片。这并非 FilePond 的 bug，而是浏览器粘贴事件的默认行为。本文将探讨如何精确控制粘贴图片的目标上传域，确保用户体验的流畅性和准确性。

问题分析

当用户按下 Ctrl+V 或 Cmd+V 粘贴图片时，浏览器会触发一个粘贴事件。如果没有进行特别的处理，这个事件会被所有监听粘贴事件的元素捕获。 FilePond 默认监听粘贴事件以便实现便捷的图片上传，因此当页面存在多个 FilePond 实例时，它们都会响应粘贴操作，从而导致所有图片上传域都显示相同的图片。

解决方案：利用 `pasteTarget` 和事件捕获

FilePond 提供了 pasteTarget 选项，允许开发者指定哪个 DOM 元素应该处理粘贴事件。结合浏览器的事件捕获机制，我们可以精准地控制图片粘贴的目标上传域。

设置 pasteTarget: 为每个 FilePond 实例设置 pasteTarget 属性，将其指向 FilePond 组件所在的容器元素。这将限制粘贴事件的作用范围，避免全局响应。
利用事件捕获: 在最外层容器上添加粘贴事件监听器，利用事件捕获机制拦截粘贴事件，并根据鼠标位置判断目标上传域。

<template>
  <div class="row" @paste.capture="handlePaste">
    <div class="col-6">
        <file-pond ref="notesFilePond" :files="notesImages" @updatefiles="handleNotesFilesUpdate"></file-pond>
    </div>
    <div class="col-6">
        <file-pond ref="plannedTasksFilePond" :files="plannedTasksImages" @updatefiles="handlePlannedTasksFilesUpdate"></file-pond>
    </div>
  </div>
</template>

<script>
import vueFilePond from 'vue-filepond';
// ... other imports

export default {
    components: { FilePond },
    data() {
      return {
        notesImages: [],
        plannedTasksImages: []
      };
    },
    methods: {
        handleNotesFilePondInit() {
            this.$refs.notesFilePond.setOptions({
                // ... other options
                allowPaste: true, // enable pasting image, not required if not disable somewhere else.
                server: {
                    // Example dummy configuration
                    url: "/fake-upload-url", // Update if necessary
                    method: "POST",
                },
                // This configuration is related with image editing capabilities, that comes shipped in with the package already
                imageEditor: true,
            });
        },

        handlePlannedTasksFilePondInit() {
             this.$refs.plannedTasksFilePond.setOptions({
                 // Same setting for image editing capability.
                server: {
                     // Example dummy configuration
                    url: "/fake-upload-url",
                    method: "POST",
                },
                 // Important Note here for image editting to prevent vue compiler from warning.
                imageEditor: true,
            });
        },
        handlePaste(event) {
            // 获取当前鼠标位置
            const mouseX = event.clientX;

            // 获取左右两列的边界
            const leftColumn = this.$refs.notesFilePond.$el.getBoundingClientRect();
            const rightColumn = this.$refs.plannedTasksFilePond.$el.getBoundingClientRect();

            // 根据鼠标位置确定目标 FilePond 实例
            let targetPond;
            if (mouseX >= leftColumn.left && mouseX <= leftColumn.right) {
                targetPond = this.$refs.notesFilePond;
            } else if (mouseX >= rightColumn.left && mouseX <= rightColumn.right) {
                targetPond = this.$refs.plannedTasksFilePond;
            }

            // 将粘贴的图片添加到目标 FilePond 实例
            if (targetPond && event.clipboardData.items[0] != undefined ) {

                event.preventDefault(); // Stop data from being handled twice
                // convert it to file for filepond to receive as intended

                targetPond.addFiles(event.clipboardData.items);

            }


        },

         // Handle files update if using FilePond instance (which the author wants)

        handleNotesFilesUpdate(fileList) {
            this.notesImages = fileList
        },
        handlePlannedTasksFilesUpdate(fileList) {
             this.plannedTasksImages = fileList
        }
        // ... other methods

    },
    mounted() {
        this.handleNotesFilePondInit();
        this.handlePlannedTasksFilePondInit();
    }
};
</script>