使用FileReader接口实现多文件的XHR POST请求_在POSTMAN中测试POST请求时，使用multer实现的上传到服务器的文件无法工作 - 腾讯云开发者社区

基础概念

FileReader 接口用于读取文件内容，通常与 HTML5 的 <input type="file"> 元素一起使用。通过 FileReader，可以在客户端读取用户选择的文件内容，然后将其发送到服务器。

优势

客户端处理：在客户端读取文件内容，减轻服务器的负担。
异步操作：FileReader 提供了异步读取文件内容的能力，不会阻塞主线程。
多种读取方式：支持按字节读取、按行读取、按文本读取等多种方式。

类型

FileReader 提供了以下几种读取方式：

readAsArrayBuffer(file)：以 ArrayBuffer 对象形式返回文件的二进制内容。
readAsDataURL(file)：以 DataURL（base64 编码）形式返回文件内容。
readAsText(file, [encoding])：以字符串形式返回文件内容，可以指定编码格式。

应用场景

文件上传：在客户端读取文件内容后，通过 AJAX 请求将文件内容发送到服务器。
图片预览：在客户端读取图片文件并显示预览。
文本处理：在客户端读取文本文件并进行处理。

实现多文件的XHR POST请求

以下是一个使用 FileReader 接口实现多文件上传的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <button id="uploadButton">Upload</button>

    <script>
        document.getElementById('uploadButton').addEventListener('click', function() {
            const files = document.getElementById('fileInput').files;
            const formData = new FormData();

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(event) {
                    formData.append('files', new Blob([event.target.result]), file.name);

                    if (i === files.length - 1) {
                        const xhr = new XMLHttpRequest();
                        xhr.open('POST', 'https://example.com/upload', true);
                        xhr.onload = function() {
                            if (xhr.status === 200) {
                                console.log('Files uploaded successfully');
                            } else {
                                console.error('Error uploading files');
                            }
                        };
                        xhr.send(formData);
                    }
                };

                reader.readAsArrayBuffer(file);
            }
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

文件读取失败：
- 原因：可能是文件路径错误、文件权限问题或浏览器不支持 FileReader。
- 解决方法：检查文件路径和权限，确保浏览器支持 FileReader。

文件上传失败：
- 原因：可能是服务器端处理问题、网络问题或请求格式错误。
- 解决方法：检查服务器端代码，确保网络连接正常，检查请求格式是否符合服务器要求。
性能问题：
- 原因：大文件读取和上传可能导致性能问题。
- 解决方法：使用分片读取和上传，减少单次读取和上传的数据量。