前端上传文件

 
<form method="POST" enctype="multipart/form-data">	
  <input type="file" name="file" value="请选择文件"><br />	
  <input type="submit">	
</form>

上面的form表单上传会造成页面整页刷新

上面的相比于Form表单的提交，使用了浏览器的XMLHttpRequest自定义的提交方式，也就是俗称的AJAX技术。但是使用这种提交方式没有设置编码 enctype="multipart/form-data" 类型，如果直接将文件内容上传，会导致后端在解析Form表单上传的文件时与Ajax上传的不一致，所以为了后端能够使用相同的代码就能解析前端这两种提交方式，所以前端需要自行格式化文件内容。在格式化的过程中，则需要通过浏览器自身提供的FormData构造函数来实例化的一个文件fd，然后使用实例的append方法将文件内容插入进去，最后利用XMLHttpRequest的实例做出发送动作。所以最终上传部分应为如下代码：

<div>	
  <input id="file" type="file" />	
  <input type="button" value="文件上传" onclick="uploadFile()" />	
</div>	
<script>	
function uploadFile() {	
  const file = document.getElementById('file').files[0];	
  const xhr = new XMLHttpRequest();	
  const fd = new FormData();	
  fd.append('file', file);	
  xhr.open('POST', 'http://127.0.0.1:8000/upload', true);	
  xhr.onreadystatechange = function() {	
    if (xhr.readyState == 4 && xhr.status == 200) {	
      alert(xhr.responseText);	
    }	
  };	
  xhr.send(fd);	
}
</script>

一个简单的解析器完成了，一般情况下你所使用的框架会解决解码这一部分问题，无论是Nodejs或是Java，他们的本质都是摘出有效的文件内容然后写进新文件里，从而达到文件上传的目的。

最终的服务端代码如下：

if(url ==='/upload' && method === 'POST') {	
    //文件类型	
    const arr = []	
    req.on('data', (buffer) => {	
      arr.push(buffer);	
    })	
    req.on('end', () => {	
      const buffer = Buffer.concat(arr);	
      const content = buffer.toString();	
      const result = decodeContent(content);	
      const fileName = content.match(/(?<=filename=").*?(?=")/)[0];	
      fileStream(fileName).write(result);	
      res.writeHead(200, {  'Content-Type': 'text/html; charset=utf-8' });	
      res.end('上传完成')	
    })	
  }