文件上传下载的妙招与陷阱

2023-09-12 06:21:17

谈起文件上传和下载，各位前端开发者们是否早已驾轻就熟，游刃有余了呢？且慢，且慢，以下经验干货，望君笑纳。

文件上传

文件上传是将文件从客户端发送到服务器的过程。最传统的文件上传方法是使用 <form> 表单上传文件的，只需要把 <form> 的 enctype 属性设置为 multipart/form-data。这种方式上传文件不需要 JavaScript，而且没有兼容问题，所有浏览器都支持。

但是，使用 <form> 表单上传文件也有一个缺点：就是只能一次上传一个文件。如果要上传多个文件，就需要使用 JavaScript 来实现。

使用 JavaScript 上传文件，可以使用 FormData 对象。FormData 对象可以存储多个文件，并将其发送到服务器。FormData 对象的用法如下：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

然后，就可以使用 XMLHttpRequest 对象将 FormData 对象发送到服务器。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);

文件下载

文件下载是从服务器下载文件到客户端的过程。最传统的文件下载方法是使用 <a> 标签下载文件的。只需要将 <a> 标签的 href 属性设置为文件的 URL，并将其 download 属性设置为文件的名称即可。

<a href="/download" download="file.txt">下载文件</a>

但是，使用 <a> 标签下载文件也有一个缺点：就是无法控制下载文件的进度。如果要控制下载文件的进度，就需要使用 JavaScript 来实现。

使用 JavaScript 下载文件，可以使用 XMLHttpRequest 对象。XMLHttpRequest 对象可以下载文件，并控制下载文件的进度。XMLHttpRequest 对象的用法如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/download');
xhr.responseType = 'blob';
xhr.onload = function() {
  const blob = xhr.response;
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'file.txt';
  a.click();
};
xhr.send();