vue Несколько экземпляров компонента filepond на одной странице, в результате чего источник входных событий сохраняется в v-модели последнего компонента - PullRequest
Новая
       29

vue Несколько экземпляров компонента filepond на одной странице, в результате чего источник входных событий сохраняется в v-модели последнего компонента

0 голосов
/ 17 апреля 2020

Я создал компонент file-uploader следующим образом: 

<template>
  <div>
    <file-pond
      :id="id"
      :key="id"
      name="files"
      ref="pond"
      v-bind="$attrs"
      v-on:activatefile="onActivateFileClick"
      v-on:removefile="onRemoveFileClick"
      v-bind:files="files"
    />
  </div>
</template>

<script>
import { lookup } from "mime-types";

// Import FilePond
import vueFilePond, { setOptions, addFile } from "vue-filepond";

// Import plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js";
import FilePondPluginImagePreview from "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js";

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

// Create FilePond component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview
);
const FILE_UPLOAD_SERVER_URL = "http://localhost:8181";

export default {
  name: "file-uploader",
  components: {
    FilePond
  },
  props: {
    id: {
      type: String,
      required: true
    },
    value: {
      default: [],
      required: true
    }
  },
  mounted() {
    this.files = this.value.map(file => ({
      source: file.filePath,
      options: {
        type: "local",
        file: {
          name: file.originalFileName,
          size: file.fileSize,
          type: lookup(file.originalFileName)
        }
      }
    }));
    setOptions({
      server: {
        url: FILE_UPLOAD_SERVER_URL,
        process: {
          url: "/files",
          method: "POST",
          onerror: response => response.data,
          onload: response => {
            response = JSON.parse(response);
            //  this emit is storing value into last component`s v-model in a page.
            this.$emit("input", [...this.value, ...response.filesUploaded]);
            return response.filesUploaded[0].filePath;
          }
        },
        revert: {
          url: "/files",
          method: "DELETE",
          onerror: response => response.data,
          onload: response => {
            response = JSON.parse(response);
            if (response.count.FILES_DELETED === 1) {
              const files = this.value.filter(
                file => file.savedFileName !== response.deletedFileNames[0]
              );
              this.$emit("input", files);
            }
            return response.count.FILES_DELETED === 1;
          }
        }
      }
    });
  },
  data: function() {
    return {
      files: []
    };
  },
  computed: {},
  methods: {
    onRemoveFileClick: function(error, file) {
      this.$axios
        .delete(`${FILE_UPLOAD_SERVER_URL}/files`, {
          params: { filePath: file.serverId }
        })
        .then(({ data }) => {
          console.log(data);
          if (data.count.FILES_DELETED === 1) {
            const files = this.value.filter(
              file => file.savedFileName !== data.deletedFileNames[0]
            );
            this.$emit("input", files);
          } else {
            error("File not deleted");
          }
        });
    },
    onActivateFileClick: function(file) {
      window.open(
        `${FILE_UPLOAD_SERVER_URL}/files?filePath=` +
          encodeURIComponent(file.serverId),
        "NewWin"
      );
    }
  }
};
</script>

Я получаю доступ к этому компоненту следующим образом: 

<file-uploader
  id="fileuploader"
  key="fileuploader"
  v-model="files"
  required="true"
  allow-multiple="true"
  accepted-file-types="application/pdf"
 />
<file-uploader
  id="fileuploader1"
  key="fileuploader1"
  v-model="files1"
  required="true"
  allow-multiple="true"
  accepted-file-types="application/pdf"
 />

После обработки загрузки файла из первого компонента, входное событие испускается. испущенное значение сохраняется в последней v-модели компонента (в этом случае оно сохраняется в файлах1) вместо сохранения соответствующей v-модели.

...