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

Question

我正在为我正在使用 vuedropzone 2 构建的产品上传功能，来自 dropzone 文档 http://www.dropzonejs.com/#config-autoQueue，可以通过设置来防止 accepted/added 文件自动排队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

Answer 1

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

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

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

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

how can i enqueue a file manually in dropzone/ vue dropzone 2

javascript

vuejs2

dropzone.js

dropzone