时间戳

首页 > 解决方案 > 在 Dropzone 的 JS 函数中设置 vue 变量

javascript - 在 Dropzone 的 JS 函数中设置 vue 变量

问题描述

我有一个页面（在 Laravel 中），我在其中使用 Vue 来实现页面的整体功能，并使用最终的 axios 帖子来提交表单，但我遇到了一个棘手的情况。

我有一个标准的 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 对象设置为该文件名的值的最佳方法是什么？

标签： javascriptvue.jsdropzone.js

解决方案

两种方式：

  1. 移动 dropzone 事件配置并将其放在 Vuemounted生命周期方法中。然后您可以轻松访问 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>

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

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>

推荐阅读