问题标签 [vue2-dropzone]

我目前正在尝试将 vue2-dropzone 导入我的 Laravel 项目，因此它正在使用 Laravel mix。

我将它导入到我的 bootstrap.js 中，如下所示：

然后，我希望能够在名为“CreatePersonalExpense.vue”的文件中的一个组件中使用。使用Vue 路由器访问该组件。

下面是它在我的组件中如何使用的片段：

但是 dropzone 无法识别，我收到错误：

Uncaught ReferenceError: vueDropzone is not defined

import vueDropzone from "vue2-dropzone";但是，如果我通过将 dropzone 放在脚本标记的开头直接将 dropzone 导入此 Vue 组件，则 dropzone 可以正常工作。为什么我不能将它包含在 bootstrap.js 文件中并让它在那里工作？

我目前正在使用 Laravel Vue SPA 管理面板。我已经应用了 Vue2-Dropzone 来为画廊部分上传图片。

在这个项目中，vue2-dropzone 表单在引导模型上打开。

我的代码成功上传了图片。当我关闭模型并重新打开它以上传其他图像时，它会显示以前上传的图像的缩略图。

下面是我的代码片段：

使用上面的代码，单击打开模型以上传图像的添加图像按钮后，我收到以下错误：

app.js:84606 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue2_dropzone___default.a.removeAllFiles is not a function at VueComponent.newModal (app.js:84606) at invoker (app.js:54930) at HTMLButtonElement.fn._withTask.fn._withTask (app.js) js:54729)

我想从 dropzone 模式中清除以前上传的图像的缩略图。

谁能帮我解决这个问题？

在dropzone（或vue2dropzone）中，有没有办法禁用文件上传，并且只允许通过拖放添加到 dropzone 。

我有一个设置，我使用自定义预览模板成功设置拖放到 dropzone 中的子区域（可点击： ，），如本期.czs1AlexanderYW 所示如何手动正确添加文件？.

DropZone 选项：

现在我要做的就是禁用 childZone在单击时触发 OS 文件上传对话框。我发现 dropzone 的输入标签隐藏在一个类中dz-hidden-input

<input type="file" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

因此，在下文中，我使用.dz-hidden-inputclassName 获取输入，然后event.preventDefault()对每个输入都不起作用。

是否有在标准 API（由 Dropzone 提供）中实现这一点。如果不是如何解决，因为上述方法document.getElementsByClassName('dz-hidden-input')不起作用。

谢谢。

我正在使用vue-dropzone组件。我想在文件预览上添加自定义按钮。我通过 ref 获取预览元素。我可以改变样式或其他任何东西。但是当我添加时<button>New Button</button>，它以字符串而不是 html 按钮的形式出现。我怎样才能做到这一点。您可以从下面的代码框链接复制。

代码沙盒链接

我怎样才能做到这一点？如果我能做到这一点，那么我将在那个按钮上添加 onClick 事件。

我用 vue2Dropzone 创建了一个自定义 Dropzone：

上传的文件然后显示在一个单独的 div 中，id="uploaded"：

在“上传”的 div 中，每个上传的图片（缩略图）旁边都有一个删除每个文件的链接。但我不知道如何实现这个功能。文档说有一个名为 removeFile(file) 的方法 ：.removeFile(file) -->Removes a file from the dropzone area.

我创建了一个名为 removeThisFile 的方法，启动了 @click="removeThisFile"：

但结果是控制台说“this.$refs.Mydropzone 未定义，现在说得通了，因为只有 DOM 对象可以传递所需的文件信息。所以我决定尝试你在开始时看到的版本：

在放置区 DOM 对象中有一个监听器，启动我的方法“removeThisFile”。

但这也不起作用，我不知道为什么，因为我在控制台中没有错误，而且该方法也没有启动，因为也没有“文件已删除！” 在控制台中。

为什么它不起作用，这是正确的方法吗？

目前，我的代码无法上传 9 个文件，每个文件最多 32MB，并出现以下错误：

我的网络选项卡也显示了这个状态为 200 的请求：

以下是我使用的 dropzone 配置选项：

这是dropzone标签：

dropzone以下是标签中提到的各种事件调用的函数：

此外，由于我记录了vDropzoneTotalUploadProgress函数的总进度，该进度永远不会超过 4.16

任何帮助，将不胜感激...

我目前正在尝试确保我的组件vue2dropzone在应用程序的初始加载时被禁用，然后当我尝试使应用程序响应移动时，我开始在控制台中注意到此错误。

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.vue2dropzone is undefined"

其次是

TypeError: "this.$refs.vue2dropzone is undefined"

我注意到 Vue 中出现的这个问题，根据我的研究，这似乎是一个常见问题，例如，当您有v-if或v-else-if在组件子中修改以显示某些内容时，将再次调用生命周期。

我的 vue2dropzone 组件代码片段只包括

在我的打字稿文件中

在我的 vue 文件中

我开始怀疑第v-show一个之前的v-if存在是否不会让人想起生命周期，因为当我在网络应用程序上时，它被禁用，但是当我切换到移动响应时，它显示为未定义。

有什么解决方案可以解决这个问题吗？我已经看到v-show被使用，this.$nextTick但在我的情况下它真的没有帮助我。我应该把它放在生命周期的另一部分mounted()吗？

我已经有这个麻烦很长一段时间了。我无法针对vue2-dropzone的缩略图预览的 CSS 样式类（根据文档，vue2dropzone 似乎与 dropzone.js 共享许多类似的属性）。每当我上传图片时，这个 CSS 类都会出现在我的 dropzone HTML 标签中。

我看到我需要覆盖放置在 CSS 中的默认值，min-height: 100px否则我将得到如下所示的结果，该结果显示一个从图像突出的白框。

这是我的 vue 文件中的代码，因为它与它的idand相关ref：

我尝试了很多东西，但它似乎没有工作，即使是一些简单的东西，比如

甚至添加一个，!important但它似乎没有奏效。

我已经尝试在特定于我的 CSS 的同时定位它：

当我尝试这个时，似乎我所做的任何更改总是导致没有 CSS 样式被更改/影响。我什至只是尝试在图像上添加一些效果来更改 CSS，但仍然看不到任何效果发生。

有谁知道我可以尝试更改缩略图预览大小的其他内容？我已经尝试在 dropzone 选项中更改thumbnailWidth和 thumbnailHeight`，但它不会摆脱实际图像下方的白色突出框。

在 Vue2-Dropzone 中上传文件时，默认参数名称为“file”。但我需要将其自定义为“上传”。

我尝试使用 vdropzone-sending 方法更改它。但它发送两个参数“文件”和“上传”。

我是否需要更改后端以接受参数“文件”？或者有没有办法自定义默认参数名称（“文件”）？

是否可以使用 dropzone 上传文件但不要 ajax 到 url。但是我可以在 Vue 中接收到文件对象吗？我无法访问 dataURL