当同一页面有多个图片上传字段时，如何处理从剪贴板粘贴图片？

Question

我正在维护一个旧的 vuejs 2 应用程序，由离开公司的其他人完成。这是我们唯一的 vuejs 应用程序，所以没有人那么了解 vue，想知道你是否可以提供帮助。我写了下面的代码，但我正在询问。

我们有 boostrap 2 列，左列和右列，每一列内都有一个文本区域和一个图像上传字段，所以总共有 2 个文本区域和 2 个图像上传字段。

您可以通过单击浏览按钮、拖放或直接从剪贴板粘贴图像来上传，我们使用 Filepond 来处理上传机制。每个图像输入字段仅允许 1 个图像。

我报告的问题仅与直接从剪贴板粘贴图像有关，因此基本上，当您粘贴图像时，两个图像输入都会收到相同的图像。我想要的是，当用户从剪贴板粘贴图像时，应该填充鼠标悬停在其上的图像上传字段。因此，如果您将鼠标悬停在左列上并粘贴图像，则只有左侧图像输入字段应该包含您粘贴的图像。

<div class="row">

            <!-- Notes Section -->
            <div class="col-6">
                <label for="notes">Report</label>
                <textarea id="notes"
                            class="form-control"
                            rows="10"
                            v-model="pmNotes"></textarea>

                <label class="mt-2">Upload Image</label>
                <file-pond ref="notesFilePond"
                            name="notesImage"
                            label-idle="Drag & Drop your image or <span class='filepond--label-action'>Browse</span>"
                            accepted-file-types="image/*"
                            :files="notesImages"
                            @updatefiles="handleNotesFilesUpdate"
                            @init="handleNotesFilePondInit"></file-pond>
            </div>

            <!-- Planned Tasks Section -->
            <div class="col-6">
                <label for="plannedTasks">Plan</label>
                <textarea id="plannedTasks"
                            class="form-control"
                            rows="8"
                            v-model="plannedTasks"></textarea>

                <label class="mt-2">Upload Image</label>
                <file-pond ref="plannedTasksFilePond"
                            name="plannedTasksImage"
                            label-idle="Drag & Drop your image or <span class='filepond--label-action'>Browse</span>"
                            accepted-file-types="image/*"
                            :files="plannedTasksImages"
                            @updatefiles="handlePlannedTasksFilesUpdate"
                            @init="handlePlannedTasksFilePondInit"></file-pond>
            </div>
</div>
import vueFilePond from 'vue-filepond';
// Import FilePond plugins
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

// Create FilePond component
const FilePond = vueFilePond(
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginImageValidateSize
);

export default {
    name: 'CreateDailyReport',

    components: {
        FilePond
    }
    ...

    method

        handleNotesFilePondInit() {
            this.$refs.notesFilePond.setOptions({
                allowPaste: true,
                pasteOnPage: false,
                pasteTarget: this.$refs.notesFilePond.$el, // Ensures only this element handles paste
                allowMultiple: false,
                maxFiles: 1,
            });
        },
        handlePlannedTasksFilePondInit() {
            this.$refs.plannedTasksFilePond.setOptions({
                allowPaste: true,
                pasteOnPage: false,
                pasteTarget: this.$refs.plannedTasksFilePond.$el, // Ensures only this element handles paste
                allowMultiple: false,
                maxFiles: 1,
            });
        },

Answer 1

您需要跟踪每个元素的悬停状态，并在该状态发生变化时更新 FilePond 选项。 仅在悬停时启用粘贴选项，不在悬停时禁用。

如果语法不完美，请原谅我。 我已经有一段时间没有使用这个框架了，但是这个概念应该有效。

您需要向组件添加两个布尔变量：

data() {
    return {
      isNotesFilePondHovered: false, 
      isTasksFilePondHovered: false,  
    };
}

向组件添加两个函数来更新 FilePond 选项（它们看起来都与此类似）：

handleNotesFilePondUpdate() {
            this.$refs.notesFilePond.setOptions({
                allowPaste: this.isNotesFilePondHovered,
                pasteOnPage: false,
                pasteTarget: this.isNotesFilePondHovered ? this.$refs.notesFilePond.$el : null
            });
        },

在组件中观察悬停变量的变化，并在检测到变化时调用适当的函数：

watch: {
    isNotesFilePondHovered(newValue) {
      // React to the hover state change of the first element
      this.handleNotesFilePondUpdate();
    },
    isTasksFilePondHovered(newValue) {
      // React to the hover state change of the second element
      this.handleTasksFilePondUdpate();
    },
  },

将鼠标移入和移出事件添加到模板中的两个 FilePond 元素，以更新组件中悬停的变量：

<file-pond ref="notesFilePond"
                            name="notesImage"
                            label-idle="Drag & Drop your image or <span class='filepond--label-action'>Browse</span>"
                            accepted-file-types="image/*"
                            :files="notesImages"
                            @updatefiles="handleNotesFilesUpdate"
                            @init="handleNotesFilePondInit"
                            @mouseenter="isNotesFilePondHovered = true"
                            @mouseleave="isNotesFilePondHovered = false"></file-pond>

需要考虑一些边缘情况，例如已经悬停的元素的初始化不会触发 @mouseenter 事件。 您也可能不喜欢必须将元素悬停才能粘贴并希望默认为其中之一。