Vue3 文件拖拽上传教程：简单易懂的实现方法

<template>
  <div class='upload'>
    <div class='drag-area' @dragover.prevent @drop='handleDrop'>
      <p>拖拽文件到这里上传</p>
    </div>
    <input type='file' ref='fileInput' @change='handleFileInput'>
  </div>
</template>
<script>
export default {
  methods: {
    handleFileInput() {
      const files = this.$refs.fileInput.files;
      // 处理上传的文件
    },
    handleDrop(event) {
      event.preventDefault();
      const files = event.dataTransfer.files;
      // 处理上传的文件
    }
  }
}
</script>
<p>在处理上传的文件时，可以使用 axios 或其他 HTTP 库将文件上传到服务器。例如：</p>
<pre><code>const formData = new FormData();
formData.append('file', files[0]);
axios.post('/upload', formData)
  .then(response =&gt; {
    // 处理上传成功的结果
  })
  .catch(error =&gt; {
    // 处理上传失败的结果
  });
</code></pre>