我实现了拖拽式上传文件的效果（上）

前言

前端+Node全栈开发融合了网页的前端交互与后端逻辑处理，开启了全新时代的开发模式。在这个领域，开发者不仅掌握HTML、CSS、JavaScript等前端技术，构建美观且响应式的用户界面，还利用Node.js这一强大的后端工具，实现服务器端的高效运行与API搭建。全栈视角让开发者能够从项目全局出发，无缝对接前后端，快速迭代产品，提升了开发效率与项目协同能力，是现代Web应用开发不可或缺的核心技能。

1.准备工作

因为我们做的是全栈开发项，将前后端分离。各自建立文件夹，并且初始化后端文件。

2.前端部分

我们文件的默认提交方式是进入文件夹选择提交，我们这里自己定义，采用拖拽的方式来实现一模一样的效果!

2.1 html，css

   <style>
        /* 100 优先级是 */
        #drop-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            font-size: 1.2em;
            cursor: pointer;
        }

        .preview {
            margin-top: 20px;
            max-width: 200px;
        }

        /* 标签1分 类名10分 id  100分 !important 永远最大 */
        /*优先级是10分*/
        #drop-area.highlight {
            border-color: #007bff;
        }
    </style>
<div id="drop-area">
        <div>拖拽图片到这里,或<em>点击选择文件</em></div>
        <input type="file" id="file-input" accept="image/*">
    </div>
    <div class="preview" id="preview"></div>

我们的这部分比较简单，大家先简单了解一下，后面有用处。

2.2 获取界面元素，设置事件监听

 const oDropArea = document.querySelector('#drop-area');
        oDropArea.addEventListener('dragenter', dragEnter);
        oDropArea.addEventListener('dragleave', dragLeave);
        oDropArea.addEventListener('dragover', dragOver);
        oDropArea.addEventListener('drop', drop);
        const fileInput = document.getElementById('file-input')

我们获取提交区域元素和文件元素。对这个区域监听的事件分别是进入，离开，在区域之中，文件放入的四个事件。

2.3 四大事件

        function dragEnter(event) {
            event.preventDefault();
            this.classList.add('highlight')
        }
        function dragLeave(event) {
            this.classList.remove('highlight')
        }
        function dragOver(event) {
            event.preventDefault();
            this.className = 'highlight'
        }
        function drop(event) {
            // drop 文件， 默认就是新窗口打开
            event.preventDefault()
            // console.log(event.dataTransfer.files);
            uploadFile(event.dataTransfer.files)
        }

接下来我们分别来完成四大事件。

1. 我们先处理掉默认操作，如果拖拽进入，那么边框将变蓝
2. 离开我们变移除，恢复默认。
3. 我们拖拽停留的时候，也要保持蓝色边框。
4. 当我们放入文件时，调用新方法，这个时候我们在下一部分讲解这个方法。

2.4 uploadFile

首先我们先明确在drop事件时的事件参数是什么，我们打印event.dataTransfer.files，会得到

因此我们可以发现，它表示的是一个文件列表，0号位表示的就是我们drop的文件。

在drop里面我们打印，console.log(event.dataTransfer.files[0].type);

这个就成为了我们后面判断拖拽的是不是一个文件有了依据。 我们给出部分代码

  function uploadFile(files) {
            // console.log(event.dataTransfer);
            // console.log(files);
            console.log('开始上传文件');
            const file = files[0]
            // console.log(file, Object.prototype.toString.call(file));
            if (!file.type.startsWith('image/')) {
                console.log('请上传图片');
                return
            }

在这里我们结合之前的drop传入的是一个文件列表，我们选第一个，然后判断类型是不是以image/开头，如果不是，则提醒上传图片并返回。

2.5 为和后端联调做准备

const formData = new FormData()

formData.append('image', file)

第一段代码创建了一个新的FormData实例。FormData对象允许我们轻松地构造一组键值对的数据，它特别适合用于发送表单数据，尤其是文件上传，因为它能很好地处理二进制数据。

formData.append('image', file): 这行代码向刚创建的formData实例中添加了一条数据。append方法接收两个参数：第一个参数是键名（通常对应于后端接收文件的字段名），在这个例子中是 'image'；第二个参数是要附加的值，在这里是一个文件对象，这意味着我们将一个名为image的文件数据加入到了formData中，准备将其作为请求的一部分发送出去。

到此，我们的前面部分就已经结束了，消化完毕之后请看下半段！