前端经典面试题合集, 怎么用 JS 实现大型文件上传?要考虑哪些问题?

使用XMLHttpRequest对象的progress事件监听上传进度。在创建XMLHttpRequest对象后，可以绑定一个progress事件处理函数，通过该函数获取上传进度，并将进度展示给用户。例如：

 
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    var percentComplete = (event.loaded / event.total) * 100;
    console.log('Upload progress: ' + percentComplete + '%');
  }
};
 

断点续传的实现涉及客户端和服务器端的协作。客户端需要记录每次上传的进度，服务器端需要支持部分内容上传。具体步骤如下： 1. 客户端在上传时记录每块文件的上传状态。 2. 如果上传中断，客户端保存已上传的块信息。 3. 在重新上传时，客户端将已上传的块信息发送给服务器，服务器根据这些信息确定哪些块已经上传成功，只上传未完成的部分。 4. 服务器端需要提供接口来检查文件的上传状态和接受文件块的接口。 5. 最终在服务器端合并所有上传的文件块。

1. 文件类型检查：在上传前检查文件类型，限制只允许上传特定类型的文件。 2. 文件大小限制：设置上传文件的大小上限，防止超大文件上传导致服务器资源耗尽。 3. 扫描文件内容：使用防病毒软件或安全库扫描上传文件，防止恶意文件上传。 4. 文件存储安全：上传的文件应存储在安全的存储介质中，并设置合适的权限，防止未授权访问。 5. 使用HTTPS：确保上传过程中使用HTTPS协议，保护上传数据在传输中的安全。

FormData对象可以方便地构建包含文件的表单数据，并通过XMLHttpRequest或Fetch API进行上传。使用步骤如下： 1. 创建FormData对象。 2. 使用append方法将文件和其他表单数据添加到FormData对象中。 3. 通过XMLHttpRequest或Fetch API发送FormData对象。例如：

 
var formData = new FormData();
formData.append('file', fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);