javascript - 我如何在 dropzone/vue dropzone 2 中手动排队文件

Question

我正在为我正在使用 vuedropzone 2 构建的产品上传功能，来自 dropzone 文档 http://www.dropzonejs.com/#config-autoQueue , 可以通过将 autoQueue 设置为 false 来防止接受/添加的文件自动排队，并且在那里声明可以通过手动调用 enqueueFile(file) 来手动排队文件。

将 autoQueue 设置为 false 有效，但是当我尝试手动将文件添加到队列时，它不起作用并且我收到此错误 this.$refs.dropzone.enqueueFile is不是函数 我的脚本:

 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

Answer 1

enqueueFile 没有委托(delegate)给 vue-dropzone 组件。所以它在 this.$refs.dropzone 上不可用。

但是有一个解决方案(但不是很优雅)。您应该能够调用 this.$refs.dropzone.dropzone 来获取底层的 dropzone 对象。

所以 this.$refs.dropzone.dropzone.enqueueFile(f) 应该可以工作。