如何使用 Vue 拖放文件上传

Question

您可以使用 HTML 拖放 API 拖放文件 来使用 Vue 。 要成功使用拖放功能，您必须调用 preventDefault 在 dragEnter 和 dragOver 因为它们的默认行为不允许删除元素。 您还可以防止默认行为 drop 在父级上，这样您就不会在错过拖放区时意外地在浏览器中打开文件，如下所示：

<div></div>
<script src="https://cdn.jsdelivr.net/npmhttps://masteringjs.io/vue@2.6.12"></script>
<script>
  const app = new Vue({
    data: () => ({ File: []}),
    template: `
    <div style="border-style:solid;" @dragover.prevent @drop.prevent>
      <input type="file" multiple @change="uploadFile"/>
      <div @drop="dragFile" style="background-color:green;margin-bottom:10px;padding:10px;">
        Or drag the file here
        <div v-if="File.length">
          <ul v-for="file in File" :key="file">
            <li>{{file.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    `,
    methods: {
      uploadFile(e) {
        this.File = e.target.files;
      },
      dragFile(e) {
        this.File = e.dataTransfer.files;
      }
  }
  });
  app.$mount("#content");
</script>