vue+node实现拖拽上传图片
效果图
首先介绍几个要用到的知识点，源码地址在最底部，不想看文字的同学可以直接拉到最底部下载。
一、知识点
实现拖拽上传需要用到的知识点如下：
前端
拖拽事件
dataTransfer
FileReader
FormData
progress
后端
multer
fs.renameSync
1.H5拖拽事件
我们拖动图片放到一个div上时，下列事件会依次发生：
- dragenter
- dragover
- dragleave或drop
只要图片被拖动到div上，就会触发dragenter事件，类似于mouseover事件。
紧接着是dragover事件，而且只要图片在div内移动，就会不停的触发。
如果拖出了div的范围，dragover事件不再发生，但会触发dragleave事件。
如果你拖着图片在div上松手了，就会触发drop事件。
2.dataTransfer对象
只有简单的拖放而没有数据变化是莫得用的。我们拖个图片进来的目的是啥？当然是为了获得图片数据，这样才能然后传到服务器上去。于是有了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。我们要完成拖拽上传图片就得靠这个对象，因为它是事件对象的属性，所以我们只能在事件处理程序中使用，参考以下代码：
//在drop事件中使用dataTransfer对象
onDrop: function(e) {
console.log("松手");
var dt = e.dataTransfer;
}
3.FormData
具体的用法还是得阅读MDN文档好，以下是本菜鸡读了文档后对FormData的理解：
首先明确FomeData是一个对象，由键值对组成，有个append（）方法增加键值，我们可以append字符、数值或是文件
var formData = new FormData();
formData.append("name", "Ciger");
formData.append("phone", 123456); //数字123456会被立即转换成字符串 "123456"
// HTML 文件类型input，由用户选择
formData.append("userfile", fileInputElement.files[0]);
append后，我们可通过get()和set()操作对象的值
formData.get('name') // 获取值-> Ciger
formData.set('name','Ciger2') //重置值-> Ciger2
知道如何使用这个对象了，最关键的就是它有什么用？
formData的作用有两个：
- 用于发送表单数据，也可独立于表单使用
- 上传文件
独立于表单使用有点抽象，我们来看代码。
<form id="myForm">
<input type="email" name="userid" placeholder="email"/>
<input type="text" name="content" />
<input type="submit" value="Stash the file!" />
</form>
代码里是一个form表单，有两个input输入框加一个提交按钮。通常来说，我们提交数据时要先获取到两个input框的数据，拼接在一起，然后通过ajax发送。
有了FormData对象，两行代码就可以实现form对象数据的拼接
var form = var form=document.querySelector("#myForm");;
var data = new FormData(form);
上述代码的data都是form表单里的填的，独立于表单使用即代表我们可以不需要html元素，直接生成数据，然后发送给后端。
来看下面的上传文件代码
var file = e.dataTransfer.files[0] //通过dataTransfer获取拖拽过来的文件
var formData = new FormData()
formData.append('file',file)
//ajax发送formData
...
xhr.send(formData)
4.FileReader
FileReader对象是用来读取文件的，我们可以通过new FileReader(file)创建一个FileReader对象，file参数代表要读取的文件，可以来自用户在一个<nput>元素上选择文件后返回的FileList对象，也可以是拖放操作生成的DataTransfer对象
FileReader有如下事件：
- onabort
- onerror
- onload
- onloadstart
- onloadend
- onprogress
我们可以通过这些事件实现图片的预览，代码如下：
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function() {
console.log(this.result)
//这里的this指向是FileReader对象！！！
//这里的this指向是FileReader对象！！！
//这里的this指向是FileReader对象！！！
//将图片的地址src设置为this.result即可
}
注意！！读取后的结果会存在onload事件中的this.result中！
5.进度事件（Progress）
progress事件是针对XHR操作的，会在浏览器接受新数据期间周期性的触发，而onprogress事件处理程序会接收到一个events对象，其target属性是XHR对象，但包含了三个额外的属性
- lengthComputable 进度信息是否可用
- position 已接收到的字节数
- totalSize 根据Content-Length响应头部确定的预期字节数
有了这些信息，我们就可以为用户创建一个上传进度条
var xhr = createXHR();
xhr.onload = function () {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
//post一般用来获取上传进度
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
console.log(e.loaded / e.total * 100)
}
}
二、前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
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"
rel="stylesheet"
/>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<style>
.dropbox {
border: 0.25rem dashed #ddd;
min-height: 8rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app" class="m-5">
<div class="dropbox p-3" ref="dropbox">
<h5
v-if="files.length===0"
class="text-center"
style="width:100%;color:#aaa;"
>
将文件拖到这里
</h5>
<div
class="border m-2 d-inline-block p-4"
style="width:15rem;flex:none;"
v-for="(file,index) in files"
:key="index"
>
<h5 class="mt-0">{{ file.name }}</h5>
<img
:src="file.src"
style="width:auto;height:auto;max-width: 100%;max-height: 100%;"
/>
<div class="progress" v-if="file.showPercentage">
<div
class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"
></div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
files: []
},
methods: {
uploadFile: function(file, url) {
return new Promise((resolve, reject) => {
var fr = new FileReader();
var that = this;
var item = {};
fr.readAsDataURL(file);
fr.onload = function() {
item = {
src: this.result,
name: file.name,
uploadPercentage: 0,
showPercentage: true
};
that.files.push(item);
var fd = new FormData();
fd.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.upload.addEventListener(
"progress",
function(e) {
if (e.loaded == e.total) {
item.uploadPercentage = Math.round(
(e.loaded * 100) / e.total
);
setTimeout(() => {
item.showPercentage = false;
}, 1000);
} else {
item.uploadPercentage = Math.round(
(e.loaded * 100) / e.total
);
}
},
false
);
xhr.onload = function() {
// alert("上传完成！");
};
xhr.send(fd);
};
});
},
onDrag: function(e) {
e.stopPropagation();
e.preventDefault();
console.log("进入");
this.$refs.dropbox.style = "border:0.25rem dashed #007bff;";
},
onDragLeave: function(e) {
e.stopPropagation();
e.preventDefault();
console.log("离开");
this.$refs.dropbox.style = "border:0.25rem dashed #ddd;";
},
onDrop: function(e) {
e.stopPropagation();
e.preventDefault();
console.log("松手");
var url = "http://127.0.0.1:3000/upload-multiply";
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i], url);
}
}
},
mounted: function() {
var dropbox = document.querySelector(".dropbox");
dropbox.addEventListener("dragenter", this.onDrag, false);
dropbox.addEventListener("dragover", this.onDrag, false);
dropbox.addEventListener("dragleave", this.onDragLeave, false);
dropbox.addEventListener("drop", this.onDrop, false);
}
});
</script>
</body>
</html>
代码解析
- HTML部分有个ref="dropbox"的div，这个就是我们的拖拽区域
<div id="app">
<div class="dropbox p-3" ref="dropbox">...</div>
...
</div>
- JS部分，mounted的时候,对dropbox添加拖拽事件的监听
mounted: function() {
var dropbox = document.querySelector(".dropbox");
dropbox.addEventListener("dragenter", this.onDrag, false);
dropbox.addEventListener("dragover", this.onDrag, false);
dropbox.addEventListener("dragleave", this.onDragLeave, false);
dropbox.addEventListener("drop", this.onDrop, false);
}
3.methods中实现这几个事件函数
upload(){} //上传文件方法
onDrag(){}
onDragLeave(){}
onDrop(){}
//具体实现看上述代码
三、后端代码
var fs = require("fs");
var express = require("express");
var multer = require("multer");
var app = express();
var upload = multer({ dest: "upload/" });
//设置跨域访问
app.all("*", function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", " 3.2.1");
// res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// 多图上传
app.post("/upload-multiply", upload.array("file", 2), function(req, res, next) {
var files = req.files;
var fileName = "";
if (files.length > 0) {
files.forEach(item => {
fileName = new Date().getTime() + "-" + item.originalname;
fs.renameSync(item.path, __dirname + "\\upload" + "\\" + fileName);
});
res.send({ code: 1, url: "127.0.0.1:3000/upload/" + fileName });
} else {
res.send({ code: 0 });
}
});
app.listen(3000);
后端需要npm install express multer
运行前要先创建upload文件夹用于存放文件
四、源码与总结
源码地址：https://github.com/C-Utopia/pratice-project.git
之前一直对H5的拖拽事件和文件上传迷迷糊糊，所以做了这个小练习。
遇到没做过的东西，首先上网搜索，例如我想实现拖拽上传，那就在百度搜索vue拖拽上传文件之类的关键词，先看看别人如何实现的，复制别人的代码下来看能不能运行，要是能成功运行则仔细阅读源码，源码有没见过的单词，如FormData、FileReader，直接上MDN看文档，了解清楚这个知识点之后再继续阅读源码。
了解清楚拖拽上传的相关知识点以及实现思路，我们再动手写代码就是水到渠成的事了。
