Question

我正在使用dropzone docs http://www.dropzonejs.com/#config-autoQueue上传使用vuedropzone 2构建的产品的功能，可以通过将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

未在vue-dropzone组件上委派enqueueFile。因此this.$refs.dropzone无法使用它。

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

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

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

1 个答案: