javascript - 如何使用 dropzone 和 vueJs 上传文件

Question

请帮帮我..
我正在使用 DropzoneJs 和 vueJs，我想使用 dropzone.js 在 vueJs 中上传文件，但不起作用，我尝试过这样的操作 & msg error

uploadImageGallery.options.autoProcessQueue = true is not a function
uploadImageGallery.processQueue is not a function

我该如何解决这个问题..？

function uploadImageGallery()
{
    Dropzone.autoDiscover = false;
    var uploadImageGalleryVar = $(".upload__button__news").dropzone({ 
        url: base_url+"/myRoute",
        addRemoveLinks: true,
        dictCancelUpload: "",
        autoProcessQueue: false,
        dictRemoveFile: "x"
    });
}

var vmGallery = new Vue({
    el: '#GalleryController',
    data: { },
    methods: {     
        AddGallery: function () {
            console.log('add');
           uploadImageGalleryVar.options.autoProcessQueue = true;
           uploadImageGalleryVar.processQueue();
        },
    },

    ready: function () { 
          uploadImageGallery();
    }

});

Answer 1

• 将该函数移至您的方法中，以便您可以通过 this 访问虚拟机
• 使用 new Dropzone() 创建 Dropzone 实例而不是 $().dropzone？
• 将新实例保存为虚拟机属性而不是变量
• 通过该属性以其他方法访问它

像这样:

var vmGallery = new Vue({

  el: '#GalleryController',
  data: {},

  methods: {
      AddGallery() {
        console.log('add');
        // access dropzone instance through vm property
        this.uploadImageGalleryVar.options.autoProcessQueue = true;
        this.uploadImageGalleryVar.processQueue();
      },

      // move function into yor methods.
      uploadImageGallery() {
        Dropzone.autoDiscover = false;
        // save dropzone instance as vm property
        // use new Dropzone() to create it instead of jQuery shortcut
        this.uploadImageGalleryVar = new Dropzone($(".upload__button__news"), {
          url: base_url + "/myRoute",
          addRemoveLinks: true,
          dictCancelUpload: "",
          autoProcessQueue: false,
          dictRemoveFile: "x"
        });
      }
  },

  ready: function() {
    uploadImageGallery();
  }
});

就是这样