我正在为我正在使用 vuedropzone 2 构建的产品上传功能，来自 dropzone 文档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