前言

我们上半部分向大家详细地介绍了怎么样拖拽文件达到和默认提交文件的效果，这里我们将后端与前端联调，来完成这最后一步！

后端部分

准备工作

我们导入两个库，分别是cors，express，大家待会就可以发现它们的作用啦！

引入库

我们进入后端js文件

const express = require('express')
const cors = require('cors')
// 后端应用
const app = express()
app.use(cors)

1. const express = require('express')：这是一个库为我们提供的非常好用的框架，我们可以用它来快速搭建我们的服务器。
2. const cors = require('cors')：这段代码主要用来处理不同端口之间不能相互访问的跨域问题。
3. const app = express()：这行代码创建了一个Express应用实例，app将会用于定义路由、配置中间件等。
4. app.use(cors())：这一行代码注册了CORS中间件到Express应用中。app.use是Express的一个方法，用于注册中间件，中间件是处理HTTP请求的函数。在这里，通过传递cors()函数（注意调用了cors函数，传入了无参数的情况，通常用于允许所有源的请求），使得我们的Express应用支持跨域请求。这意味着，当客户端从与服务器不同的源发起请求时，服务器会添加适当的响应头，允许这样的跨域请求，从而避免了浏览器的跨域限制。

设置响应

app.get('/users', (req, res) => {
    res.send('你好你好你好')
})

app.listen(3000, () => {
    console.log('我启动了');
})

我们首先监听端口事件，当服务器成功启动并开始监听指定端口时，该回调函数会被执行，输出控制台日志“我启动了”，通知开发者服务器已经启动并运行。 app.get() 是Express中用于定义处理GET请求的方法。它有两个参数：第一个参数是URL路径（在这个例子中是'/users'），第二个参数是一个回调函数，该函数会在每次该路径被GET请求访问时执行。

• (req, res) 是回调函数的参数，req（请求对象）包含了HTTP请求的信息，如请求头、请求参数等；res（响应对象）则用来构建发送给客户端的HTTP响应。
• res.send('你好你好你好') 指的是当该路由被访问时，服务器会向客户端发送一个简单的文本消息“你好你好你好”。

这里如果我们运行，然后去浏览器访问这个端口，就会弹出你好你好你好的文字，说明我们组建服务器成功啦！

前端fetch

fetch('http://127.0.0.1:3000/upload', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                })

我们接下来前端采用fetch的方式去进入这个端口，方式是post，传入我们的文件，然后打印我们从后端接收到的数据。

进行到这里，我们的基本操作就已经完成啦!剩下的操作无非就是进行一些数据的交互，我们将在之后进行更加深入的讲解。其实进行到这一步，我们对全栈开发的了解就已经有个初步的认识了。