0

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

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

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

下面是我的代码片段：

import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";
export default {
  data() {
    return {
      dropzoneOptions: {
        url: "/api/carousel",
        maxFilesize: 10,
        acceptedFiles: '.jpg, .jpeg',
        dictDefaultMessage: "Click or Drag and Drop to upload",
        headers: {
          "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]")
            .content
        }
      }
    };
  },
  methods: {
    newModal() {
      vue2Dropzone.removeAllFiles(true);
      $("#addNew").modal("show");
    }
  },
  components: {
    vueDropzone: vue2Dropzone
  }
};

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

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 模式中清除以前上传的图像的缩略图。

谁能帮我解决这个问题？

4

2 回答 2

3

假设您在模板中有带有 ref 的 vue-dropzone

 <vue-dropzone ref="myVueDropzone" id="dropzone">
 </vue-dropzone>

那么你应该使用

  this.$refs.myVueDropzone.removeAllFiles()
于 2019-07-24T10:09:35.847 回答
0

这removeAllFiles()是一种黑客行为。它不适用于某些情况。

例如，它不会“重置” Dropzonesoptions对象。因此，如果您想通过选项对象对不同情况进行验证，则不会使用该removeAllFiles()方法重置。

重置 Dropzone（或任何 Vue 对象）的正确方法是设置和更改:key属性。像这样的例子：

<vue-dropzone :key="`dropzone-${dynamicVariableOrJustSomeCounter}`">
</vue-dropzone>
于 2021-04-21T09:55:52.810 回答