在 Dropzone 的 JS 函数中设置一个 vue 变量

Question

我有一个页面（在 Laravel 中），我在其中使用 Vue 来实现页面的整体功能，并使用最终的 axios post 来提交表单，但是我已经运行陷入困境。

我有一个标准的 dropzone（使用纯 JS dropzone 代码），我在其中放置图像以供上传。当我放下图像时，我让控制台记录文件名，它工作得很好。问题是我需要获取该文件名并将其推送到我的 vue 代码中的变量对象中。

dropzone代码是这样的：

Dropzone.options.imageWithZones = {
        init: function() {
            this.on("addedfile", 
                function(file) { 
                    console.log(file.name);
            });
        }           
    };

但是我的vue代码在这里，我需要用上一个函数的文件名设置ImageZoneName

new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      el: "#commonDiv",
      data() {
        return{
            ImageZoneName: [],
            
        }

      },
........

简单获取文件名（将文件添加到 dropzone 时）并将 vue ImageZoneName 对象设置为具有该文件名值的最佳方法是什么？

Answer 1

两种方式：

移动 dropzone 事件配置并将其放入 Vue mounted 生命周期方法中。然后就可以方便的访问Vue实例来设置变量了。

new Vue({
  el: "#app",
  data: {
    imageZoneNames: [],
  },
  mounted() {
    const vm = this;
    Dropzone.options.imageWithZones = {
        init: function() {
          this.on("addedfile", 
            function(file) { 
              vm.imageZoneNames.push(file.name);
            }
          );
        }           
      };
  } // end mounted
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  Files:
  <ul>
    <li v-for="fileName in imageZoneNames" :key="fileName">
      {{ fileName }}
    </li>
  </ul>
  <form action="/file-upload"
      class="dropzone"
      id="imageWithZones"></form>
</div>

将实例分配给变量并通过该变量访问数据

const vm = new Vue({
  el: "#app",
  data: {
    imageZoneNames: [],
  },
})

Dropzone.options.imageWithZones = {
  init: function() {
    this.on("addedfile", 
      function(file) { 
        vm.imageZoneNames.push(file.name)
      }
      );
  }           
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  Files:
  <ul>
    <li v-for="fileName in imageZoneNames" :key="fileName">
      {{ fileName }}
    </li>
  </ul>
  <form action="/file-upload"
      class="dropzone"
      id="imageWithZones"></form>
</div>

在 Dropzone 的 JS 函数中设置一个 vue 变量

setting a vue variable within a JS function for Dropzone

javascript

vue.js

dropzone.js