Question

请帮助我..
我正在使用DropzoneJs＆amp; vueJs，我想使用dropzone.js在vueJs中上传文件但是不起作用，我试过这样的＆amp; msg错误

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?
将新实例另存为vm属性而不是变量
通过该属性以其他方式访问它

像这样：

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();
  }
});

就是这样

如何使用dropzone＆amp;上传文件vueJs

1 个答案: