Laravel Nova Vue向FilePond上传传递额外数据

我有一个文件上传组件，我试图将数据与图像一起传递到控制器，以便我可以创建照片对象。一些数据是磁盘之类的东西，如'S3'，因此控制器将知道在哪里存储图像。然而，FilePond似乎不允许任何变量，props或vuex状态传递到FilePond示例。无论我如何尝试，在FilePond中，它说你可以使用formData.append（'Hello'，'World'）

FilePond.setOptions({
    server: {
        url: 'http://192.168.0.100',
        timeout: 7000,
        process: {
            url: './process',
            method: 'POST',
            headers: {
                'x-customheader': 'Hello World',
            },
            withCredentials: false,
            onload: (response) => response.key,
            onerror: (response) => response.data,
            ondata: (formData) => {
                formData.append('Hello', 'World');
                return formData;
            },
        },
        revert: './revert',
        restore: './restore/',
        load: './load/',
        fetch: './fetch/',
    },
});

但如果你把世界

this.photo.disk，或
state.photoUploader.photo.disk，或
this.$store.state.photoUploader.photo.disk或mapState并使用
照片

或者任何它总是未定义的东西。它不知道这个文件示例之外是什么。
还有一个fileMetaDataObject可以传递，这个也有同样的问题，我可以整天传递字符串，它可以工作，但是一旦你试图传递任何类型的变量，它就不知道它是什么。https://pqina.nl/filepond/docs/api/plugins/file-metadata/

FilePond.setOptions({
    fileMetadataObject: {
        hello: 'world',
    },
});

我只尝试了原始元数据选项

metadata: {
                    date: '2018-10-5T12:00',
                },

我提到的所有变量都在console.log中显示它们的值，并且在组件中显示它们，但在filepond示例中不起作用。我需要能够将数据与照片一起发送到控制器以创建照片对象。
下面是我的组件的一个例子（仅供参考，我把所有不同类型的变量作为我尝试的例子）：

<template>
    <div>
      <Head title="Photo Uploader" />

      <Card
        class="flex flex-col items-center justify-center h-full"
      >

      <!-- Photo Fields -->
        <div class="flex flex-col w-full pb-1 pt-8">
            <div class="flex flex-row w-full">
                <div class="pr-4">
                    <validation-check :validated="photoFieldsExists"></validation-check>
                </div>
                <div class="flex flex-col">
                    <heading class="pb-2">Step 5: Upload Images: </heading>
                    <h1>Click to choose images, or drag and drop into box.</h1>
                    <h1 class="mb-6">{{ photo }}</h1>
                </div>
            </div>
            <div class="w-full h-full">
                <file-pond
                    name="image"
                    ref="pond"
                    label-idle="Click to choose images, or drag here..."
                    @init="handleFilePondInit"
                    accepted-file-types="image/*"
                />
            </div>
        </div>

      </Card>
    </div>
  </template>

<script>
  import ApiUrls from "../../components/mixins/ApiUrls";
  import ValidationCheck from './ValidationCheck';
  import {mapState} from 'vuex';

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

  // Import plugins
  import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js';
  import FilePondPluginFileMetadata from 'filepond-plugin-file-metadata';
  // 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';

  setOptions({
      server: {
          process: {
              url: Nova.config('apiUrl') + '/photos',
              headers: {
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
              },
              ondata: (formData) => {
                  formData.append('photo_group_id', this.photoGroupId);
                  formData.append('photo_type_id', this.photoTypeId);
                  formData.append('disk', this.photo.disk);
                  formData.append('title', this.photo.title);
                  formData.append('alt', this.photo.alt);
                  formData.append('description', this.photo.description);
                  formData.append('src', this.photo.src);
                  formData.append('sub_folder', this.photo.subFolder);

                  return formData;
            },
          }
      },
      fileMetadataObject: {
          photo_group_id: "photo.photo_group_id",
          photo_type_id: "this.$store.state.photoUploader.photoTypeId",
          disk: "photo.disk",
          title: "this.photo.title",
          alt: "state.photoUploader.photo.alt",
          description: "",
          src: "",
          sub_folder: "",
      },
  });

  const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginFileMetadata
  );

  export default {
      components: {
          ValidationCheck,
          FilePond
      },
      mixins: [ApiUrls],
      props: ["photo"],

      computed: {
        // TODO: Change setOptions to pull from computed properties
          ...mapState({
              photo: state => state.photoUploader.photo,
              photoTypeId: state => state.photoUploader.photoTypeId,
              photoGroupId: state => state.photoUploader.photoGroupId
          })
      },

      data() {
          return {
              includesPhotos: '?include=photos',
              metaData: {
                photo_group_id: this.$store.state.photoUploader.photoGroupId,
                photo_type_id: this.$store.state.photoUploader.photoTypeId,
                disk: this.$store.state.photoUploader.photo.disk,
                title: this.$store.state.photoUploader.photo.title,
                alt: this.$store.state.photoUploader.photo.alt,
                description: this.$store.state.photoUploader.photo.description,
                src: this.$store.state.photoUploader.photo.src,
                sub_folder: this.$store.state.photoUploader.photo.subFolder
              },
            //   photo: this.photo,
            //   photoGroupId: this.photoGroupId,
            //   photoTypeId: this.photoTypeId,
          }
      },

      mounted() {
          this.fetchData();
      },

      methods: {
          fetchData() {
            console.log('fetch data in upload handler');
            console.log('Photo: ');
            console.log(this.$store.state.photoUploader.photo);
            console.log('PhotoTypeId: ');
            console.log(this.$store.state.photoUploader.photoTypeId);
          },

          handleFilePondInit: function () {
              console.log('FilePond has initialized');
              console.log('FilePond Object: ', this.$refs.pond)

              // example of instance method call on pond reference
              this.$refs.pond.getFiles();
              console.log('handle file pond 1:')
              console.log(this.$refs.pond.getFiles());
            //   console.log('this.state.files: ');
            //   console.log(this.state.files);
          },

      }
  }
  </script>

  <style>
  /* Scoped Styles */
  </style>

我也尝试过将其传递到fileponds自定义服务器选项，但没有运气。下面是他们的例子：

FilePond.setOptions({
    server: {
        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
            // fieldName is the name of the input field
            // file is the actual file object to send
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', 'url-to-api');

            // Should call the progress method to update the progress to 100% before calling load
            // Setting computable to false switches the loading indicator to infinite mode
            request.upload.onprogress = (e) => {
                progress(e.lengthComputable, e.loaded, e.total);
            };

            // Should call the load method when done and pass the returned server file id
            // this server file id is then used later on when reverting or restoring a file
            // so your server knows which file to return without exposing that info to the client
            request.onload = function () {
                if (request.status >= 200 && request.status < 300) {
                    // the load method accepts either a string (id) or an object
                    load(request.responseText);
                } else {
                    // Can call the error method if something is wrong, should exit after
                    error('oh no');
                }
            };

            request.send(formData);

            // Should expose an abort method so the request can be cancelled
            return {
                abort: () => {
                    // This function is entered if the user has tapped the cancel button
                    request.abort();

                    // Let FilePond know the request has been cancelled
                    abort();
                },
            };
        },
    },
});

Laravel Nova Vue向FilePond上传传递额外数据

1条答案

相关问题

热门标签

最新问答