<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script> <style> .dropbox { border: .25rem dashed #007bff; min-height: 5rem; } </style> <title>Document</title> </head> <body> <div> <div> <h2>把要上传的文件拖动到这里</h2> </div> </div> <script> new Vue({ el: '#app', data: {}, methods: {}, mounted: function () {} }); </script> </body> </html>
2. 检测拖动事件
首先让页面支持文件拖拽，在 Vue 的 mounted() 函数中添加代码：
mounted: function () { var dropbox = document.querySelector('.dropbox'); dropbox.addEventListener('dragenter', this.onDrag, false); dropbox.addEventListener('dragover', this.onDrag, false); dropbox.addEventListener('drop', this.onDrop, false); }
当把文件拖动到浏览器的拖动区域时，会触发三种事件：
文件第一次进入拖动区时，触发 dragenter 事件
文件在拖动区来回拖拽时，不断触发 dragover 事件
文件已经在拖动区，并松开鼠标时，触发 drop 事件
实现拖动上传，我们只需要关心 drop 事件。不过另外两个事件也需要监听，目的是阻止浏览器默认行为。如果不阻止，那么把文件拖到浏览器时，浏览器就会自动下载这个文件（默认行为），drop 事件触发不出来。
事件的监听函数添加在 Vue 的 methods 对象中：
methods: { uploadFile: function (file) { console.log(file); }, onDrag: function (e) { e.stopPropagation(); e.preventDefault(); }, onDrop: function (e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; for (var i = 0; i !== dt.files.length; i++) { this.uploadFile(dt.files[i]); } } },
onDrop() 函数中，通过 e.dataTransfer.files 可以拿到用户拖动到浏览器的文件的基本信息，uploadFile() 函数现在只这些信息打印了出来，可以了解到，拖动到浏览器的每个文件都是一个 File 对象：
3. 处理拖动事件
现在，我们要给 uploadFile() 函数增加功能，实现拖动文件时，拖动区出现文件名和一个上传进度条。
首先在 Vue 的 data 对象中定义 files 属性，用来保存所有拖动到浏览器中文件的名称。然后在uploadFile() 函数每当被调用时，把文件名和上传进度保存到 files 中：
data: { files: [] }, methods: { uploadFile: function (file) { var item = { name: file.name, uploadPercentage: 67 }; this.files.push(item); }, }
上传进度的功能在后面再介绍，先写一个固定值。
相应地，在HTML代码中，用 v-for 关键字显示 files 的每一项：
<div> <h2>把要上传的文件拖动到这里</h2> <div v-for="file in files"> <h5>{{ file.name }}</h5> <div> <div :style="{ width: file.uploadPercentage+'%' }"></div> </div> </div> </div>
而且，“把要上传的文件拖动到这里” 的提示只在拖动区没有文件的时候才显示：
<h2 v-if="files.length===0">把要上传的文件拖动到这里</h2>
这样，拖动效果就有了：
4. 文件上传
接下来实现真正的文件上传，继续往 uploadFile() 函数添加代码：
uploadFile: function (file) { var item = { name: file.name, uploadPercentage: 67 }; this.files.push(item); var fd = new FormData(); fd.append('myFile', file); var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php', true); xhr.send(fd); },
这里用到了 FormData，把要上传的文件附在了 FormData 上，并通过AJAX方式发送给PHP端。PHP端代码：
if (isset($_FILES['myFile'])) { move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']); echo 'OK'; } else { echo 'No file specified'; }
现在刷新下页面，把电脑上的两个文件拖到浏览器中，PHP端会接收并保存文件到 uploads 目录：
