How to implement drag-and-drop uploading files in Vue

How to implement drag-and-drop file upload in Vue

In modern web development, file upload is a very common requirement. Usually, we can use a file selection button to select the file to upload. But sometimes, users may prefer to directly drag and drop files into the designated area for uploading. In Vue, we can easily implement the function of dragging and dropping files to upload.

First, we need to create an area in Vue that can accept drag-and-drop uploads. This area can be a <div> element to wrap the logic of file upload. On this <code><div> element, we need to listen for drag events to capture the files dragged by the user. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;template&gt; &lt;div class=&quot;dropzone&quot; @drop=&quot;handleDrop&quot; @dragover=&quot;handleDragOver&quot;&gt; &lt;!-- 在这里显示一些提示信息，指导用户拖拽文件 --&gt; &lt;/div&gt; &lt;/template&gt;</pre><div class="contentsignin">Copy after login</div></div><p>In the above code, we define a CSS class <code>.dropzone to set the style of the drag area. At the same time, we capture the user's dragging behavior through @drop and @dragover event listeners.

Next, we need to define two methods in methods to handle drag events.

<script>
export default {
  methods: {
    handleDrop(e) {
      e.preventDefault();
      let files = e.dataTransfer.files;
      this.uploadFiles(files);
    },
    handleDragOver(e) {
      e.preventDefault();
    },
    uploadFiles(files) {
      // 处理上传逻辑
      // 在这里可以使用Axios或其他HTTP客户端库将文件上传到服务器端
    }
  }
}
</script>

In the handleDrop method, we use e.preventDefault() to prevent the browser's default file opening behavior. Then, use e.dataTransfer.files to get the list of files dragged by the user. Finally, we call the uploadFiles method to handle the upload logic.

In the handleDragOver method, we also use e.preventDefault() to prevent the browser's default file opening behavior. This lets the browser know that we want to accept dragged files.

Finally, we need to handle the file upload logic in the uploadFiles method. In this method, you can use any HTTP client library you like, such as Axios, to upload the file to the server.

<script>
import axios from 'axios';

export default {
  methods: {
    async uploadFile(file) {
      const formData = new FormData();
      formData.append('file', file);
      try {
        const res = await axios.post('/upload', formData);
        console.log(res.data);
      } catch (err) {
        console.error(err);
      }
    },
    async uploadFiles(files) {
      Array.from(files).forEach(file => this.uploadFile(file));
    }
  }
}
</script>

In the above code, we use Axios library to send HTTP POST request to upload the file to the server side. First, we create a FormData object through new FormData(), and then use the append method to add files to the FormData object. Finally, we use await to send the POST request and output the upload result in the console.

With the above code, we can easily implement the drag-and-drop function of uploading files in Vue. Users only need to drag the file to the designated area, and the file will be automatically uploaded to the server.

Of course, for a better user experience, we can also add some prompt information to the drag area to guide users to drag files. We can also use CSS styles to beautify the drag area. In short, Vue provides us with a very convenient API to handle file upload needs. We only need to follow the above steps.