### 优化前端以解决因文件过大导致服务端返回404的问题 #### 1. 分片上传 分片上传是一种将大文件分割为多个小块并逐一上传的技术。这种方法可以有效避免单次请求数据量过大而导致的服务器拒绝问题。在前端实现时，可以使用`Blob`对象来分割文件，并通过循环逐片上传。 ```javascript function sliceAndUpload(file, chunkSize = 1 * 1024 * 1024) { // 默认每片1MB let chunks = Math.ceil(file.size / chunkSize); for (let i = 0; i < chunks; i++) { let start = i * chunkSize; let end = Math.min(file.size, start + chunkSize); let blob = file.slice(start, end); // 切割文件 let formData = new FormData(); formData.append('file', blob, file.name); // 设置文件名 uploadChunk(formData, i); // 调用上传函数 } } async function uploadChunk(formData, index) { try { const response = await fetch('/api/upload', { method: 'POST', body: formData, }); if (!response.ok) { throw new Error(`Chunk ${index} failed`); } console.log(`Chunk ${index} uploaded successfully`); } catch (error) { console.error(error); } } ``` 通过这种方式，可以确保每次上传的数据量都在服务器允许范围内[^2]。 #### 2. 前端压缩 对于某些类型的文件（如图片或文档），可以在上传前进行压缩处理。例如，使用JavaScript库（如`compressorjs`）对图片进行无损或有损压缩，从而减少文件大小。 ```javascript new Compressor(file, { quality: 0.6, // 压缩质量 success(result) { let formData = new FormData(); formData.append('file', result, file.name); uploadFile(formData); // 调用上传函数 }, error(err) { console.error(err.message); }, }); ``` 此方法适用于需要保留文件格式但不介意轻微画质损失的场景[^3]。 #### 3. 动态调整请求头 部分服务器可能要求明确指定`Content-Length`或其他头部信息。如果未正确设置这些字段，可能会导致请求被错误解析或拒绝。可以通过动态计算文件大小并添加到请求头中来避免此类问题。 ```javascript function uploadFileWithHeaders(formData, file) { fetch('/api/upload', { method: 'POST', headers: { 'X-File-Size': file.size.toString(), // 添加文件大小 }, body: formData, }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .catch(error => { console.error('There was a problem with the fetch operation:', error); }); } ``` 这种方法有助于确保服务器能够正确处理请求[^4]。 #### 4. 监控与反馈 在上传过程中提供实时进度监控和错误反馈机制，可以帮助用户了解当前状态并及时解决问题。利用`XMLHttpRequest`或`fetch` API的`upload`事件监听器，可以轻松实现这一功能。 ```javascript function monitorUploadProgress(formData) { const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload', true); xhr.upload.onprogress = function(event) { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; console.log(`Upload progress: ${percentComplete.toFixed(2)}%`); } }; xhr.onload = function() { if (xhr.status === 200) { console.log('Upload completed successfully'); } else { console.error('Upload failed'); } }; xhr.onerror = function() { console.error('Upload failed due to network error'); }; xhr.send(formData); } ``` 上述代码片段展示了如何通过事件监听器捕获上传过程中的各种状态变化[^5]。 #### 5. 预检查文件大小 在提交请求之前，先检查文件是否超出服务器允许的最大值。如果超出，则提示用户重新选择或进行本地裁剪。 ```javascript function validateFileSize(file, maxSizeInBytes = 10 * 1024 * 1024) { // 默认10MB if (file.size > maxSizeInBytes) { alert(`File size exceeds the limit of ${maxSizeInBytes / (1024 * 1024)} MB`); return false; } return true; } ``` 此方法简单直接，能够在问题发生前阻止无效请求[^1]。 ---