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未捕获的TypeError：__WEBPACK_IMPORTED_MODULE_0_vue2_dropzone ___ default.a.removeAllFiles不是一个函数在VueComponent.newModal（app.js：84606）在调用者处（app.js：54930）在HTMLButtonElement.fn._withTask.fn._withTask（app.js：54729）

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

有人可以帮我吗？

Answer 1

假设您在模板中具有带引用的vue-dropzone

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

然后您应该使用

  this.$refs.myVueDropzone.removeAllFiles()

Answer 2

removeAllFiles() 有点像黑客。它在某些情况下不起作用。

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

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

<vue-dropzone :key="`dropzone-${dynamicVariableOrJustSomeCounter}`">
</vue-dropzone>

清除Vue2-Dropzone中的上传区域

2 个答案: