前端上传文件的基本方法

原创

编程三昧 2023-09-20 21:27:27 博主文章分类：JavaScript ©著作权

文章标签 Data 表单上传文件 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者编程三昧的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

处理用户选择的文件并将之上传至服务器，这属于是前端开发的基本功。

虽然现在有各种框架和插件能够很简单地实现文件上传功能，但是作为一个有追求的前端，还是有必要了解以下前端文件上传的基本原理的。 ^ - ^

使用 FormData 对象上传文件

我们可以使用 FormData 对象来创建一个表单数据对象，以便在提交表单时发送数据。

FormData 对象是基于 XMLHttpRequest 对象实现的，它可以用于在客户端或服务器端发送和接收表单数据。

我们可以使用 FormData 对象将文件数据封装成表单数据，并设置上传目标为一个新的表单元素。然后，将表单数据发送到服务器。

const fileInput = document.getElementById('fileInput');
const fileToUpload = fileInput.files[0];

const formData = new FormData();
formData.append('file', fileToUpload);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('File uploaded successfully.');
  } else {
    console.log('Error uploading file.');
  }
};
xhr.send(formData);

注意事项：

FormData 对象主要用于在客户端上传文件和表单数据，它不适用于在服务器端接收数据。
在使用 FormData 对象上传文件时，需要确保文件大小不超过服务器允许的最大文件大小。

使用 Blob 对象上传文件

除了使用 FormData 对象外，我们还可以将 File 对象转化为 Blob 对象后再上传

实现原理：使用 HTML5 的 File API 获取用户选择的文件，并将文件数据封装成一个 Blob 对象，然后将 Blob 对象上传。

// 获取用户选择的文件
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];

  // 创建一个 Blob 对象
  const blob = new Blob([file], { type: file.type });

  // 创建一个 XMLHttpRequest 对象
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('File uploaded successfully.');
    } else {
      console.log('Error uploading file.');
    }
  };
  xhr.send(blob);
});

扩展

通过上一篇文章对 File API 的学习，我们知道还有一个 FileReader 对象也可以读取本地文件，具体实现如下：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  // 创建一个 FileReader 对象
  const reader = new FileReader();
  reader.addEventListener('load', function(event) {
    const blob = new Blob([event.target.result], {type: file.type});
    // 创建一个 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log('File uploaded successfully.');
      } else {
        console.log('Error uploading file.');
      }
    };
    xhr.send(blob);
  });
  reader.readAsArrayBuffer(file);
});