借助FileReader实现将文件编码为Base64后通过AJAX上传

2023年5月19日下午8:19 • JavaScript

这里是借助FileReader实现将文件编码为Base64后通过AJAX上传的完整攻略：

1. 读取文件

首先通过input元素选择上传的文件，使用FileReader的readAsDataURL方法将文件读取为Base64编码的url形式。代码如下：

<input type="file" id="file">

const fileInput = document.getElementById('file');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.addEventListener('load', (event) => {
    const base64 = event.target.result;
    console.log(base64); // 打印Base64编码的文件内容
    // 可以将base64数据传递给后端进行上传
  });

  reader.readAsDataURL(file);
});

2. 通过AJAX上传

将读取到的Base64编码的文件内容通过AJAX异步上传到后端。需要注意的是，在传递Base64数据时需要设置Content-Type为application/x-www-form-urlencoded;charset=UTF-8，否则后端无法解析数据。代码如下：

const fileInput = document.getElementById('file');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.addEventListener('load', (event) => {
    const base64 = event.target.result;
    console.log(base64);

    // 使用ajax将Base64数据上传到后端
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('上传成功！');
      }
    };
    xhr.send(`data=${encodeURIComponent(base64)}`);
  });

  reader.readAsDataURL(file);
});

示例1: 上传图片

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传图片到服务器</title>
  </head>
  <body>
    <h1>上传图片到服务器</h1>
    <input type="file" id="file">
    <script>
      const fileInput = document.getElementById('file');
      fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.addEventListener('load', (event) => {
          const base64 = event.target.result.split(',')[1];
          console.log(base64);
          const xhr = new XMLHttpRequest();
          xhr.open('POST', '/upload');
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
              console.log('上传成功！');
            }
          };
          xhr.send(`data=${encodeURIComponent(base64)}`);
        });
        reader.readAsDataURL(file);
      });
    </script>
  </body>
</html>

这个示例演示如何上传用户选择的图片文件并将其转换为Base64编码后通过AJAX上传到后端。

示例2: 上传音频

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传音频到服务器</title>
  </head>
  <body>
    <h1>上传音频到服务器</h1>
    <input type="file" id="file">
    <script>
      const fileInput = document.getElementById('file');

      fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.addEventListener('load', (event) => {
          const base64 = event.target.result.split(',')[1];
          console.log(base64);

          const xhr = new XMLHttpRequest();
          xhr.open('POST', '/upload');
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');

          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
              console.log('上传成功！');
            }
          };

          xhr.send(`data=${encodeURIComponent(base64)}`);
        });

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

这个示例演示如何上传用户选择的音频文件并将其转换为Base64编码后通过AJAX上传到后端。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：借助FileReader实现将文件编码为Base64后通过AJAX上传 - Python技术站