1

私はvuedropzone 2で構築している製品の機能をアップロードすることに取り組んでいます。ドロップゾーンのドキュメントhttp://www.dropzonejs.com/#config-autoQueueから、受け入れられた/追加されたファイルが自動的にキューに入れられるのを防ぐことができますautoQueue を false に設定すると、手動で呼び出してファイルを手動でキューに入れることができることも記載されていますenqueueFile(file)。

設定autoQueue to falseは機能しますが、ファイルを手動でキューに追加しようとすると、機能せずthis.$refs.dropzone.enqueueFile is not a function 、スクリプトで次のエラーが発生します。

 new Vue({
     data: {
      dropzoneOptions: {
        url: 'https://httpbin.org/post',
        thumbnailWidth: 150,
        maxFilesize: 1000,
        addRemoveLinks: true,
        autoProcessQueue: false,
        autoQueue: false,
        dictDefaultMessage: "<i class='is-size-150 fa fa-cloud-upload'>
            </i>",
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
        parallelUploads: 1,
      },
     },
    methods: {
      upload() {
        document.querySelector('.dropzone').click();
      },
     startUpload() {
       this.$refs.dropzone.getAcceptedFiles().forEach(f => this.$refs.dropzone.enqueueFile(f));
    ....
    },
   })

my template: 
  div
    button.button.is-primary(@click="upload") upload Document(s)
    dropzone(
      v-show="false",
      :id="id",
      ref="dropzone",
      :maxNumberOfFiles="100" ,
      :maxFileSizeInMB="1000",
      :options="dropzoneOptions",
      @vdropzone-upload-progress="updateFilename",
      @vdropzone-files-added="handleFilesAdded",
      @vdropzone-error="handleUploadError",
      @vdropzone-total-upload-progress="progress",
      @vdropzone-queuecomplete="handleUploadComplete",
      @vdropzone-success="fileUploaded",
      :parallelUploads="1",
    )

   // this dialog modal shows only when files have been selected after clicking upload document button 
   el-dialog(title="Upload Files", :visible.sync="hasAddedFiles")
    div(slot="title")

    // button for adding more files before clicking start upload
      button.is-info.button.ml-15(@click="addFiles") Add File(s)

    // table that lists all selected files
    el-table(:data="addedFiles", :height="400")
      el-table-column(type="index" :index="1")
      el-table-column(
        property="name", 
        show-overflow-tooltip,
        label="Name", 
        min-width="200"
      )
      el-table-column(property="type" label="File type")
      el-table-column(label="Delete" width="100")
        template(scope="props")
         // button for removing a file
         button.button.trash(
           :class="$style.trash", 
           @click="removeFile(props.row)",
         )
          i.material-icons delete
    div(slot="footer")
      // select file type
       el-select(
         v-model="addedFilesType"
         filterable
         allow-create
         placeholder="Choose file(s) type"
       )
         el-option(
           v-for="(item, index) in documentTypes"
           :key="index"
           :value="item"
         )

       // button for enqeueing and start processing the queue in order to start files upload 
       button.button.is-primary.is-medium.ml-15(
        @click="startUpload", 
        :disabled="!addedFilesType.length",
       )
         span.icon
           i.material-icons cloud_upload
         span Start Upload
4

1 に答える 1

3

enqueueFilevue-dropzone コンポーネントでは委任されません。そのため、では利用できませんthis.$refs.dropzone。

しかし、これには解決策があります (ただし、あまりエレガントではありません)。this.$refs.dropzone.dropzone基になるドロップゾーン オブジェクトを取得するために呼び出すことができるはずです。

だからthis.$refs.dropzone.dropzone.enqueueFile(f)うまくいくはずです。

于 2018-01-12T13:36:03.777 に答える