如何使用dropzone&vueJs

how upload file using dropzone & vueJs

本文关键字：vueJs amp 何使用 dropzone      更新时间：2023-09-26

请帮帮我
我正在使用DropzoneJs&vueJs，我想用dropzone.js在vueJs中上传文件，但不起作用，我试过这样&消息错误

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

  • 将函数移动到方法中，以便可以通过this访问vm
  • 使用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();
  }
});

就是

相关文章：