vue中使用dropzone.js，用图片文件名调用函数

Question

我很难按照我需要的方式使用它，但我的 Vue 项目中有一个可用的 dropzone 实例。

我可以在 dropzone 代码中上传图像和调用函数，但是，我需要直接从 html 中的表单调用函数才能发送 'card' 对象。

我需要做的就是在通过 dropzone 表单添加文件时使用文件名调用一个函数。

我的代码：

    <div class="uk-width-3-10">
                    <form v-on:change="imageChange(card)" method="post" action="{{url('product/parts/upload/store')}}" enctype="multipart/form-data"
                          class="dropzone" v-bind:id="'dropzone-'+i">
                    </form>
                </div>

... 

    imageChange(Card){
        console.log('working');
    },
    addCard(){
      Vue.nextTick(function () {
              new Dropzone("#dropzone-"+cardIndex, {
                maxFilesize: 12,
                renameFile: function (file) {
                    var dt = new Date();
                    var time = dt.getTime();
                    return time + file.name;
                },
                acceptedFiles: ".jpeg,.jpg,.png,.gif",
                addRemoveLinks: true,
                timeout: 50000,
                removedfile: function (file) {
                    console.log(file.upload.filename);
                    var name = file.upload.filename;

                    var fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) : void 0;

                },
                init: function() {
                    this.on("addedfile", 
                    function(file) { 
                        instance.imageZoneNames.push({name: file.upload.filename});
                        console.log(file);
                        console.log(instance.imageZoneNames);
                    });
                }
            });
            });
         }

Answer 1

Dropzone 有很多 events，您使用了 removedfile() 活动！还有一个名为 addedfile() 的事件，当文件添加到拖放区列表时执行

imageChange(card) {
 console.log(card)
},

addCard() {
 Vue.nextTick(() => {
  new Dropzone('#dropzone-` + cardIndex, {

   addedfile(file) {
    this.imageChange(file);
   }

  }
 }
}

vue中使用dropzone.js，用图片文件名调用函数

Using dropzone.js in vue, calling function with image file name

dropzone.js

vue.js