Nodejs+express+html5 实现拖拽上传

下面是讲解“Nodejs+express+html5 实现拖拽上传”的完整攻略。

1. 准备工作

首先，我们需要安装Node.js和Express框架。可以从官网下载安装包进行安装。安装后可以在命令行中运行node -v和npm -v命令验证Node.js和npm是否正确安装。然后，我们可以使用npm安装Express框架，命令如下：

npm install express --save

2. 实现拖拽上传

前端代码

HTML5中提供了拖拽上传功能，我们可以使用dragstart、dragenter、dragover、drop、dragend这几个事件来实现。具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Upload</title>
    <style>
        .dropzone {
            border: 2px dashed #ccc;
            padding: 20px;
            cursor: pointer;
        }

        .dropzone.over {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="dropzone" id="dropzone">将文件拖拽到这里上传</div>
    <script>
        var dropzone = document.getElementById('dropzone');

        dropzone.addEventListener('dragover', handleDragOver, false);
        dropzone.addEventListener('dragenter', handleDragEnter, false);
        dropzone.addEventListener('dragleave', handleDragLeave, false);
        dropzone.addEventListener('drop', handleDrop, false);

        function handleDragOver(event) {
            event.stopPropagation();
            event.preventDefault();
            event.dataTransfer.dropEffect = 'copy'; // 禁止默认操作，启用复制操作
        }

        function handleDragEnter(event) {
            event.stopPropagation();
            event.preventDefault();
            dropzone.classList.add('over'); // 添加over样式以提示用户当前区域接受drop事件
        }

        function handleDragLeave(event) {
            event.stopPropagation();
            event.preventDefault();
            dropzone.classList.remove('over'); // 移除over样式
        }

        function handleDrop(event) {
            event.stopPropagation();
            event.preventDefault();
            dropzone.classList.remove('over'); // 移除over样式

            var files = event.dataTransfer.files; // 获取上传的文件
            handleFiles(files); // 处理上传的文件
        }

        function handleFiles(files) {
            // 将文件上传至后端
        }
    </script>
</body>
</html>

后端代码

上传文件需要使用multer模块，可以使用npm进行安装，命令如下：

npm install multer --save

接下来，我们可以使用如下代码处理上传的文件：

var express = require('express');
var multer  = require('multer');
var app = express();
var upload = multer({ dest: 'uploads/' }); // 上传文件保存路径

app.post('/upload', upload.single('file'), function (req, res, next) {
    // req.file 是 `file` 文件的信息
    // req.body 将具有文本域数据，如果存在的话
    console.log(req.file); // 打印上传的文件信息
});