Javascript 我能'；t通过输入对象中的键获取值

我正在创建一个允许在Vuejs中拖放或拾取文件的图像上载组件。我的问题是，当我插入一些图像时，我既不能使用键获取图像数据，也不能在结果对象中循环

编辑（无需阅读下面的原始帖子） 在str的回复之后，我将我的函数改为promise，并且发生了一些其他有趣的想法。我的新职能是：

OnDrop(e) {
    e.preventDefault();
    e.stopPropagation();
    let fileArray = Array.from(e.dataTransfer.files);
    let addImages = new Promise((resolve, reject) => {
      for (let file of fileArray) {
        this.addImage(file);
        if (this.$props.multipleFiles === "false") break;
      }
      resolve();
    });
    addImages.then(() => {
      this.emittingData();
    });
  }
},
addImage(file) {
    let reader = new FileReader();
    reader.onload = e => {
        let fileItem = {
            base64: e.target.result,
            name: file.name,
            type: file.type
        };
        this.files.push(fileItem);
    };
    reader.readAsDataURL(file);
},
emittingData() {
    let emitData = {
        images: this.files,
        fileFor: this.$props.whichImage,
        type: this.sourceType
    };
    myUploader.$emit("insertImage", emitData);
}

myUploader.$on("insertImage", insert => {
  if (insert.fileFor === "featured") {
    setTimeout(() => {
      this.images = insert.images[0].base64;
    }, 50);
  }
}); 

在父组件中，我将获得如下所示的发射数据：

myUploader.$on("insertImage", insert => {
    this.images = insert.images
    console.log(this.images);
    // returns:
    // [__obj__: Observer
    //     0: {__obj__: Observer
    //          base64: (...)
    //          name: (...)
    //          type: (...)
    //     }
    //     1: {__obj__: Observer
    //          base64: (...)
    //          name: (...)
    //          type: (...)
    //     }
    //     __ob__: Observer
    //     And some other things
    //        }
    // ]
    console.log(this.images[0]);
    // keeps returning undefined
    // 
});

当我在VueDevTools中的“images”上方执行代码时，对象变为：

images: Array[2]
    0: Object
        base64: "data:image/png;base64,...
        name: filename.png
        type: image/png
    1: Object
        base64: "data:image/png;base64,...
        name: othername.png
        type: image/png

我认为更有趣的是，当我像这样向DOM中添加img元素时

<img :src="images[0].base64">

当我移除img标签时，这个错误就消失了

长话短说：

我有一个对象，控制台说它的0索引是未定义的，尽管它显然在那里

我有一个屏幕上显示的图像，控制台说不存在

当我将myUploader.on函数更改为setTimeout时，它可以工作，但我不想这样做。该函数的修改和工作版本为：

OnDrop(e) {
    e.preventDefault();
    e.stopPropagation();
    let fileArray = Array.from(e.dataTransfer.files);
    let addImages = new Promise((resolve, reject) => {
      for (let file of fileArray) {
        this.addImage(file);
        if (this.$props.multipleFiles === "false") break;
      }
      resolve();
    });
    addImages.then(() => {
      this.emittingData();
    });
  }
},
addImage(file) {
    let reader = new FileReader();
    reader.onload = e => {
        let fileItem = {
            base64: e.target.result,
            name: file.name,
            type: file.type
        };
        this.files.push(fileItem);
    };
    reader.readAsDataURL(file);
},
emittingData() {
    let emitData = {
        images: this.files,
        fileFor: this.$props.whichImage,
        type: this.sourceType
    };
    myUploader.$emit("insertImage", emitData);
}

myUploader.$on("insertImage", insert => {
  if (insert.fileFor === "featured") {
    setTimeout(() => {
      this.images = insert.images[0].base64;
    }, 50);
  }
}); 

有人能帮我做这个吗

原职 下面是我在子组件中的拖放函数：

OnDrop(e) {
    e.preventDefault();
    e.stopPropagation();
    let fileArray = Array.from(e.dataTransfer.files);
    for (let file of fileArray) {
      this.addImage(file);
      if (this.$props.multipleFiles === "false") return;
    }
    console.log(typeof this.files);
    // returns: object.
    // I don't know why because it's defined as an empty array in data object,
    // in addImage() function down below, I push the values in it as it's an array,
    // VueDevtool tells it's an array. But typeof returns object. 
    console.log(this.files);
    // returns:
    // [__obj__: Observer
    //     0: {__obj__: Observer
    //          base64: (...)
    //          name: (...)
    //          type: (...)
    //     }
    //     1: {__obj__: Observer
    //          base64: (...)
    //          name: (...)
    //          type: (...)
    //     }
    //     __ob__: Observer
    //     And some other things
    //        }
    // ]
    // BTW, when I click on (...), I see the correct values are there.
    console.log(this.files[0]);
    // returns: undefined
    console.log(Object.values(this.files));
    // returns: []
    console.log(Object.keys(this.files));
    // returns: []
    this.files.forEach(image =>
      console.log("image :", image)
      // returns: literally nothing, not even null or undefined.
      // I tried too many other loops and the results were the same.
    );
},

addImage(file) {
  let reader = new FileReader();
  reader.onload = e => {
    let fileItem = {
      base64: e.target.result,
      name: file.name,
      type: file.type
    };
    this.files.push(fileItem);
  };
  reader.readAsDataURL(file);
}

当我查看VueDevtools中的“files”对象时，我发现它与其他元素一样是一个普通元素

files: Array[2]
    0: Object
        base64: "data:image/png;base64,...
        name: filename.png
        type: image/png
    1: Object
        base64: "data:image/png;base64,...
        name: othername.png
        type: image/png

我的问题是，如何获得base64值？ 此.files[0].base64引发“base64未定义”错误

有趣的是，至少对我来说，我有一个带有v-for的image元素，它使用base64字符串显示图像

<img v-for="image in files" :src="image.base64">

array[0].base64？此.files[0].base64抛出“base64 of undefined”错误。数组是异步填充的，当您执行

OnDrop

时，它仍然是一个空数组。浏览器控制台在对象扩展时记录对象，而不是在对象被记录时记录对象。

：src=“…”

或

v-bind:src=“”

，而不是

src=“…”

@str您是对的。我用settimeout尝试了一下，效果很好。现在我需要做出承诺。谢谢