Question

从技术上讲，这里的一切都可以正常工作，但是我有一个明显的问题：将图像添加到我的Dropzone实例时，我希望它将该图像的文件名添加到我的union数组下cards。

但是我不知道如何通过Dropzone调用独立函数。

具体地说，我需要在这里弄清楚的是，如何使用Dropzone中的imageInfo和imageChange调用我的file函数，因为它在循环中。

如何在添加图像时使用两个属性调用该函数？

card

new Vue({
      mixins: [VueClickaway.mixin],
      components: {},
      el: "#commonNameDiv",
      data() {
        return {
          searchString: [''],
          results: [],
          savedAttributes: [],
          cards: [],
          showList: false,
          zoneNumber:[],
          imageZoneNames: [],
          imageInfo: [] 
        }           
      },
      methods: {
        imageChange(file){
            console.log('it worked');
        },
        autoComplete(ev, card) {
          this.results = [];
          console.log(this.searchString);
          if (ev.target.value.length > 2) {
            axios.get('/product/parts/components/search', {
              params: {
                searchString: ev.target.value
              }
            }).then(response => {
              card.results = response.data;
              this.showList = true;
              console.log(this.results);
              console.log(this.searchString);
            });
          }
        },
        saveAttribute(result, card) {
          card.value = result.attribute_value;
          card.results = [];
          card.zone = this.zoneNumber;
          this.showList = false;
        },
        addCard: function() {
            this.cards.push({
              index: "",
              value: "",
              zoneNumber: "",
              results: [],
              componentImage:"",
              imageInfo: ""
            });
            
             // Index of the last card pushed
            let cardIndex = this.cards.length - 1;
            let instance = this; // $vm
            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);

                    });
                }
            });
            });

            console.log('cards here');
            console.log(this.cards);
        },
        hideDropdown() {
          this.showList = false;
        },

      },
      created() {

        let instance = this;

        Dropzone.autoDiscover = false;
      

        this.addCard();

       }
    })

Answer 1

addCard方法已经可以访问添加到card的{{1}}实例，因此您可以将this.cards传递到card的回调中事件。例如，您可以向addedfile实例添加一个filename道具，然后card回调可以使用来自addedfile事件参数的信息来更新该道具：

file

codepen

通过dropzone.js传递索引并调用函数

1 个答案: