「短文」如何在 Vue 中使用拖拽方式上传文件

您可以在 VUE 项目中使用 HTML拖放API（HTML drag and drop API） 。要正确使用拖放功能，您必须在 Dragenter 和 Dragover 上调用 preventDefault，因为它们的默认行为不允许拖拽。您还可以在拖放区域上添加 drop 属性阻住默认行为，否则将会在浏览器里打开文件，示例代码如下：

<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/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>

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载