前言
随着 Web 应用的不断发展，越来越多的网站开始需要文件上传的功能。无论是头像、音乐、视频还是普通的 Word 文档，都需要用户上传到服务器。在此过程中，异步编程是必不可少的—— 因为如果采用同步方式会导致浏览器卡死。Promise 是一种强大的处理异步的方式，接下来将重点介绍在 Promise 异步编程中处理文件上传时的方法和技巧。
基础知识
- HTML 中 input 标签的类型为 file，支持文件上传。
- 在 Node.js 中，Express 框架可以处理文件上传请求，利用 multer 或者 express-fileupload 中间件实现。
Promise 的用法
Promise 是一种可以处理异步编程的对象，它可以用简洁明了的方式来定义和管理异步操作。它的最大优势在于可以避免回调地狱的问题。了解 Promise 的基本用法非常重要，这里不再赘述。如果读者不熟悉 Promise，可以参考JavaScript Promise 迷你书。
文件上传的处理方式
文件上传通常需要分成两步：
- 前端将文件上传至服务器。
- 服务器接收到文件，进行处理，并将处理结果返回给客户端。
前端
在前端，需要采用 JavaScript 定义上传文件的功能。通常使用 ajax 和 FormData 将文件上传至服务器。
-- -------------------- ---- -------
-------- ---------------- -
------ --- ------------------------- ------- -
----- -------- - --- -----------
----------------------- ------
----- --- - --- -----------------
---------------- -----------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
-----------------------
-
-
--
-------------------
---
-在这里，我们可以看到如何使用 Promise 来处理文件上传请求。我们通过 XMLHttpRequest 对象实现了将文件上传至服务器，并且 resolve 或 reject 文件上传的结果。
服务器
在服务器，可以使用 multer 或者 express-fileupload 中间件来实现文件上传功能的处理。这里以 multer 为例来介绍文件上传的处理方式。
const multer = require('multer');
const upload = multer({
dest: 'uploads/'
});
app.post('/upload', upload.single('file'), function(req, res) {
res.send(req.file.filename);
});这里我们通过 multer 中间件来处理文件上传请求。upload.single('file') 表示接收上传的单个文件，上传保存的路径在 dest 中。在服务器处理完成之后，我们将文件的保存路径（即文件名）返回给客户端。
结论
通过使用 Promise 实现文件上传的异步编程过程，我们可以更好地处理并管理异步操作。同时，我们也了解了如何在服务器端使用 multer 对上传的文件进行处理。希望这篇文章对于正在探索 Promise 异步编程相关技术的前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670cddd15f551281025be35f