JavaScript Base64 作为文件上传的实例代码解析

当我们需要在网页上进行文件上传操作时，在客户端与服务端之间进行数据的传输会遇到一些问题，其中最主要的一点就是兼容性问题。为解决这一问题，我们可以将文件内容转换为Base64编码的字符流，以字符串的形式传输到服务端，再由服务端进行解码，即可实现文件上传操作。

下面是JavaScript Base64 作为文件上传的实例代码解析：

一、将文件转成Base64编码

在前端JavaScript代码中，我们可以使用FileReader对象中的readAsDataURL方法，将文件转换为Base64编码。下面是一个基本示例：

function handleFileSelect(evt) {
  var files = evt.target.files; //获取文件列表
  var output = [];

  for (var i = 0, f; f = files[i]; i++) {
    var reader = new FileReader();

    //进行Base64编码
    reader.onload = (function(theFile) {
      return function(e) {
        var base64Str = e.target.result.split(',')[1]; //去除头部信息（data:image/jpeg;base64,）
        uploadToServer(base64Str); //将Base64字符串上传到服务端
      };
    })(f);

    //读取文件内容
    reader.readAsDataURL(f);
  }
}

document.getElementById('file').addEventListener('change', handleFileSelect, false);

二、将Base64编码的数据上传至服务端

Base64编码的数据已经可以在客户端上传至服务端，服务端需要对其进行解码并转换为可用的二进制数据。在服务端Node.js中，我们可以使用Buffer类进行编码和解码。下面是一个服务端处理上传文件的示例：

const http = require('http');
const fs = require('fs');

http.createServer(function(req, res) {
  if (req.method === 'POST') {
    var body = '';

    req.on('data', function(chunk) {
      body += chunk; //获取请求体中的数据
    });

    req.on('end', function() {
      //去除Base64头部信息（data:image/jpeg;base64,）
      const base64Data = body.replace(/^data:image\/\w+;base64,/, '');

      //将Base64编码转换为原始二进制数据
      const binaryData = Buffer.from(base64Data, 'base64').toString('binary');

      //保存到文件
      fs.writeFileSync('upload.jpg', binaryData, 'binary', function(err) {
        if (err) {
          console.log(err);
        } else {
          console.log('successful');
        }
      });

      res.writeHead(200, {
        'Content-Type': 'text/plain'
      });
      res.end('upload success!');
    });
  } else {
    res.writeHead(200, {
      'Content-Type': 'text/html'
    });
    res.end(
      '<form action="/" method="post" enctype="multipart/form-data">' +
      '<input type="file" name="file">' +
      '<input type="submit" value="Upload">' +
      '</form>'
    );
  }
}).listen(3000);

通过以上示例，我们可以实现在网页上使用JavaScript将文件转换为Base64编码，并上传至服务端的功能。

另外，需要注意的一点是，Base64编码的数据传输时相对于二进制数据会增加一些额外的数据，会导致传输的文件大小变大，因此在上传大型文件时需要注意传输的数据量。