博客摘录「 vue实现上传拖拽功能」

要在Vue中实现上传拖拽功能，你可以按照以下步骤进行操作：

1. 首先，在Vue组件的模板中添加一个可拖拽区域，例如一个`div`元素，并为其添加一个`@drop`事件监听器和一个`@dragover`事件监听器：

<template>
  <div class="drop-area"
       @drop="handleDrop"
       @dragover="handleDragOver">
    拖拽文件到这里上传
  </div>
</template>

2. 在Vue组件的`methods`中定义`handleDrop`和`handleDragOver`两个方法：

methods: {
  handleDrop(e) {
    e.preventDefault();
    let files = e.dataTransfer.files;
    // 处理文件上传逻辑
  },
  handleDragOver(e) {
    e.preventDefault();
  }
}

3. 在`handleDrop`方法中，我们可以获取拖拽的文件列表`e.dataTransfer.files`，然后可以根据需要进行文件上传逻辑的处理。你可以将文件传递给一个上传函数，或者使用一个Vue插件来处理文件上传。

例如，你可以使用`axios`库来实现文件上传：

import axios from 'axios';

methods: {
  handleDrop(e) {
    e.preventDefault();
    let files = e.dataTransfer.files;
    this.uploadFiles(files);
  },
  uploadFiles(files) {
    let formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append('file', files[i]);
    }
    axios.post('/upload', formData)
      .then(response => {
        // 处理上传成功的逻辑
      })
      .catch(error => {
        // 处理上传失败的逻辑
      });
  },
  handleDragOver(e) {
    e.preventDefault();
  }
}

4. 最后，你可以根据需要在模板中添加样式来优化拖拽区域的显示效果。

这样，你就可以在Vue中实现上传拖拽功能了。