javascript - 清除Vue2-Dropzone中的上传区域

Question

我目前正在开发 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:54729)

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

谁能帮我解决这个问题吗？

Answer 1

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

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

那么你应该使用

  this.$refs.myVueDropzone.removeAllFiles()