vue 如何接收文件拖放并提取路径？

Question

写了段代码，不知道哪里有问题？ 好心人帮我修正下？十分感谢！

<template>
  <div id="app">
    <div class="box" @drop="drop" @dragenter="dragenter" @dragover="dragover" @dragleave="dragleave"></div>
  </div>
</template>

<script>
export default {
  methods: {
    dragenter(e) {
      e.preventDefault();
    },
    dragover(e) {
      e.preventDefault();
    },
    dragleave(e) {
      e.preventDefault();
    },
    drop(e) {
      console.log('drop', e);
      e.preventDefault();
      var efile = e.dataTransfer.files[0];
      console.log(efile.path, 'utf8');
      return false;
    }
  }
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>

输出：

undefined "utf8"
event.js:510 Uncaught TypeError: this._drop is not a function
    at Object.handleEvent (event.js:510)

Answer 1

路径的话不一定有。

http://www.lilnong.top/static/html/sf-a-1190000022597533-file-preview-input-drop.html 我之前写的一个预览文件的页面

drop 里面看上去是已经拿到了，你打印 efile 就是你的文件。

然后报错的问题看上去不是这里代码的问题，因为我没看到代码中出现类似的字样。