随着互联网的发展，文件上传功能已经成为许多 Web 应用程序的必备功能之一。对于前端开发人员而言，实现文件上传功能是一项非常基础的技术，但是在开发 SPA 应用中，却可能会遇到一些挑战。本文将介绍如何在 SPA 应用中实现文件上传功能的方法，帮助读者更好地掌握前端开发技术。
传统的文件上传方式
传统的文件上传方式是通过 <form> 标签来实现的。在 <form> 中设置 enctype 属性为 multipart/form-data，然后在表单中添加一个 <input type="file">，即可实现文件上传功能。
<form method="post" action="/upload" enctype="multipart/form-data"> <input type="file" name="myfile"> <button type="submit">上传</button> </form>
这种方式在传统的 Web 应用程序中很常见，但是对于 SPA 应用而言，不太适用。SPA 应用一般使用 AJAX 技术和 RESTful API 来与后端进行交互，而传统的文件上传方式并不能很好地与 AJAX 技术配合使用。
使用 XMLHttpRequest 对象上传文件
在 SPA 应用中实现文件上传功能，需要使用 XMLHttpRequest 对象来实现。XMLHttpRequest 对象是浏览器提供的一个 API，用于在后台发送 HTTP 请求，并接收服务器的响应。
要实现文件上传功能，需要使用 FormData 对象来封装文件，然后通过 XMLHttpRequest.send() 方法发送。代码示例如下：
let formData = new FormData();
formData.append('myfile', inputFile.files[0]);
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);其中，inputFile 是一个 <input type="file"> 元素，用户通过它选择要上传的文件。formData.append() 方法将文件添加到 FormData 对象中。注意，这里使用了 files[0]，因为一个 <input /> 元素可以选择多个文件，但是我们一般只上传第一个文件。xhr.open() 方法指定了发送请求的方法和 URL，xhr.send() 方法发送请求。
在服务器端，我们需要处理上传文件的请求。代码示例如下：
// www.javascriptcn.com code example
app.post('/upload', function(req, res) {
let form = formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
let oldPath = files.myfile.path;
let newPath = '/path/to/new/location/' + files.myfile.name;
fs.rename(oldPath, newPath, function(err) {
if (err) throw err;
res.send('上传成功！');
});
});
});这里使用了 Node.js 的 formidable 模块来处理文件上传请求。form.parse() 方法将请求体解析成 fields、files 对象，其中 files 对象包含了上传的文件信息。使用 Node.js 的 fs.rename() 方法，将上传的文件从临时目录中移动到指定的位置。
文件上传进度
文件上传可能需要一些时间，为了让用户知道上传状态和进度，可以在前端添加一个进度条。在 XMLHttpRequest 对象上，可以通过 progress 事件来获取上传进度信息。代码示例如下：
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
let percentComplete = evt.loaded / evt.total;
progressBar.style.width = percentComplete * 100 + '%';
}
});这里使用 evt.lengthComputable 判断是否可以获取进度信息，例如，当上传的文件非常小的时候，可能无法获取进度信息。evt.loaded 表示已上传的字节数，evt.total 表示文件总字节数。progressBar 是一个 <div> 元素，用于表示进度条。
结束语
本文介绍了在 SPA 应用中实现文件上传功能的方法，包括使用 XMLHttpRequest 对象上传文件和文件上传进度的处理。掌握这些技术，可以帮助读者更好地开发 SPA 应用。需要注意的是，在实际的开发中，还需要考虑一些安全问题，如文件大小、文件类型、文件名等。希望读者在掌握这些基础技术的同时，也要注意安全问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfec96e46428fe9ec3c968