<form method="post" action="http://localhost:8100" enctype="multipart/form-data"> 选择文件:   <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/> 标题：<input type="text" name="title"/><br/><br/><br/>  <button type="submit" id="btn-0">上 传</button>   </form>   

/**   * 服务入口  */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');  var app = new Koa();
var port = process.env.PORT || '8100';  var uploadHost= `http://localhost:${port}/uploads/`;    app.use(koaBody({   formidable: {   //设置文件的默认保存目录，不设置则保存在系统临时目录下  os uploadDir: path.resolve(__dirname, '../static/uploads') },  multipart: true // 开启文件上传，默认是关闭
}));    //开启静态文件访问
app.use(koaStatic(  path.resolve(__dirname, '../static')
)); //文件二次处理，修改名称
app.use((ctx) => {   var file = ctx.request.files.f1;//得道文件对象    var path = file.path;   var fname = file.name;//原文件名称   var nextPath = path+fname;  if(file.size>0 && path){ //得到扩展名 var extArr = fname.split('.');  var ext = extArr[extArr.length-1];  var nextPath = path+'.'+ext;    //重命名文件 fs.renameSync(path, nextPath);  }   //以 json 形式输出上传文件地址 ctx.body = `{   "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}" }`;
}); /** * http server   */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');

//设置 multiple属性
<input type="file" name="f1" multiple/>

//二次处理文件，修改名称
app.use((ctx) => {   var files = ctx.request.files.f1;// 多文件， 得到上传文件的数组   var result=[];  //遍历处理  files && files.forEach(item=>{   var path = item.path;   var fname = item.name;//原文件名称   var nextPath = path + fname;    if (item.size > 0 && path) { //得到扩展名 var extArr = fname.split('.');  var ext = extArr[extArr.length - 1];    var nextPath = path + '.' + ext;    //重命名文件 fs.renameSync(path, nextPath);  //文件可访问路径放入数组   result.push(uploadHost+ nextPath.slice(nextPath.lastIndexOf('/') + 1)); }   }); //输出 json 结果    ctx.body = `{   "fileUrl":${JSON.stringify(result)} }`;
})

   <iframe id="temp-iframe" name="temp-iframe" src="" ></iframe> <form method="post" target="temp-iframe" action="http://localhost:8100" enctype="multipart/form-data">    选择文件(可多选):  <input type="file" name="f1" id="f1" multiple/><br/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/> 标题：<input type="text" name="title"/><br/><br/><br/>  <button type="submit" id="btn-0">上 传</button>   </form>   <script>  var iframe = document.getElementById('temp-iframe');
iframe.addEventListener('load',function () {    var result = iframe.contentWindow.document.body.innerText;  //接口数据转换为 JSON 对象   var obj = JSON.parse(result);   if(obj && obj.fileUrl.length){  alert('上传成功');  }   console.log(obj);
}); </script>

 <div>  选择文件(可多选):  <input type="file" id="f1" multiple/><br/><br/>   <button type="button" id="btn-submit">上 传</button>
</div>    

<script>  function submitUpload() {   //获得文件列表，注意这里不是数组，而是对象    var fileList = document.getElementById('f1').files; if(!fileList.length){   alert('请选择文件'); return; }   var fd = new FormData();   //构造FormData对象   fd.append('title', document.getElementById('title').value); //多文件上传需要遍历添加到 fromdata 对象  for(var i =0;i<fileList.length;i++){ fd.append('f1', fileList[i]);//支持多文件上传  }   var xhr = new XMLHttpRequest();   //创建对象    xhr.open('POST', 'http://localhost:8100/', true);   xhr.send(fd);//发送时  Content-Type默认就是: multipart/form-data;  xhr.onreadystatechange = function () {  console.log('state change', xhr.readyState);    if (this.readyState == 4 && this.status == 200) {   var obj = JSON.parse(xhr.responseText);   //返回值 console.log(obj);   if(obj.fileUrl.length){ alert('上传成功');  }   }   }   }   //绑定提交事件    document.getElementById('btn-submit').addEventListener('click',submitUpload);
</script> 

  fetch('http://localhost:8100/', {   method: 'POST', body: fd    })  .then(response => response.json())   .then(response =>{   console.log(response);  if (response.fileUrl.length) {  alert('上传成功');  }   } ) .catch(error => console.error('Error:', error));

 <div>   选择文件(可多选):  <input type="file" id="f1" multiple/><br/><br/>   <div id="progress">   <span class="red"></span>   </div>    <button type="button" id="btn-submit">上 传</button>  </div>

<script>  function submitUpload() {   var progressSpan = document.getElementById('progress').firstElementChild;   var fileList = document.getElementById('f1').files; progressSpan.style.width='0';   progressSpan.classList.remove('green'); if(!fileList.length){   alert('请选择文件'); return; }   var fd = new FormData();   //构造FormData对象   fd.append('title', document.getElementById('title').value); for(var i =0;i<fileList.length;i++){ fd.append('f1', fileList[i]);//支持多文件上传  }   var xhr = new XMLHttpRequest();   //创建对象    xhr.open('POST', 'http://10.70.65.235:8100/', true);    xhr.onreadystatechange = function () {  console.log('state change', xhr.readyState);    if (xhr.readyState == 4) {  var obj = JSON.parse(xhr.responseText);   //返回值 console.log(obj);   if(obj.fileUrl.length){ //alert('上传成功');    }   }   }   xhr.onprogress=updateProgress;  xhr.upload.onprogress = updateProgress; function updateProgress(event) {    console.log(event); if (event.lengthComputable) {   var completedPercent = (event.loaded / event.total * 100).toFixed(2);   progressSpan.style.width= completedPercent+'%'; progressSpan.innerHTML=completedPercent+'%';    if(completedPercent>90){//进度条变色  progressSpan.classList.add('green');    }   console.log('已上传',completedPercent);    }   }   //注意 send 一定要写在最下面，否则 onprogress 只会执行最后一次 也就是100%的时候 xhr.send(fd);//发送时  Content-Type默认就是: multipart/form-data;  }   //绑定提交事件    document.getElementById('btn-submit').addEventListener('click',submitUpload);   </script>

 <div> 选择文件(可多选):  <div class="addfile">添加文件 <input type="file" id="f1" multiple />    </div>    <div class="img-box"></div> <button type="button" id="btn-submit">上 传</button>  </div>

<script>  //更改网络 为慢3g，就可以比较明显的看到进度条了   var fileMaxCount=6; var imgBox =document.getElementsByClassName('img-box')[0];  var willUploadFile=[];//保存待上传的文件以及相关附属信息    document.getElementById('f1').addEventListener('change',function (e) {  var fileList = document.getElementById('f1').files; if (willUploadFile.length > fileMaxCount || fileList.length>fileMaxCount || (willUploadFile.length+ fileList.length>fileMaxCount)) {   alert('最多只能上传' + fileMaxCount + '张图');  return; }   for (var i = 0; i < fileList.length; i++) {  var f = fileList[i];//先预览图片 var img = document.createElement('img');    var item = document.createElement('div');   var progress = document.createElement('div');   progress.className='progress';  progress.innerHTML = '<span class="red"></span><button type="button">Abort</button>';   item.className='item';  img.src = window.URL.createObjectURL(f);    img.onload = function () {  //显示要是否这块儿内存    window.URL.revokeObjectURL(this.src);   }   item.appendChild(img);  item.appendChild(progress); imgBox.appendChild(item);   willUploadFile.push({   file:f, item,   progress    }); }   }); function xhrSend({file, progress}) {    var progressSpan = progress.firstElementChild;  var btnCancel = progress.getElementsByTagName('button')[0]; btnCancel.removeEventListener('click',function(e) { }); btnCancel.addEventListener('click',function(e) {    if(xhr && xhr.readyState!==4){  //取消上传  xhr.abort();    }   }); progressSpan.style.width='0';   progressSpan.classList.remove('green'); var fd = new FormData();   //构造FormData对象   fd.append('f1',file);   var xhr = new XMLHttpRequest();   //创建对象    xhr.open('POST', 'http://localhost:8100/', true);   xhr.onreadystatechange = function () {  console.log('state change', xhr.readyState);    //调用 abort 后，state 立即变成了4,并不会变成0 //增加自定义属性  xhr.uploaded if (xhr.readyState == 4 &&  xhr.uploaded) { var obj = JSON.parse(xhr.responseText);   //返回值 console.log(obj);   if(obj.fileUrl.length){ //alert('上传成功');    }   }   }   xhr.onprogress=updateProgress;  xhr.upload.onprogress = updateProgress; function updateProgress(event) {    if (event.lengthComputable) {   var completedPercent = (event.loaded / event.total * 100).toFixed(2);   progressSpan.style.width= completedPercent+'%'; progressSpan.innerHTML=completedPercent+'%';    if(completedPercent>90){//进度条变色  progressSpan.classList.add('green');    }   if(completedPercent>=100){   xhr.uploaded=true;  }   console.log('已上传',completedPercent);    }   }   //注意 send 一定要写在最下面，否则 onprogress 只会执行最后一次 也就是100%的时候 xhr.send(fd);//发送时  Content-Type默认就是: multipart/form-data;  return xhr; }   //文件上传  function submitUpload(willFiles) {  if(!willFiles.length){  return; }   //遍历文件信息进行上传    willFiles.forEach(function (item) { xhrSend({   file:item.file, progress:item.progress  }); }); }   //绑定提交事件    document.getElementById('btn-submit').addEventListener('click',function () {    submitUpload(willUploadFile);   }); </script>

 <div class="drop-box" id="drop-box">  拖动文件到这里,开始上传    </div>    <button type="button" id="btn-submit">上 传</button>

<script>    var box = document.getElementById('drop-box');  //禁用浏览器的拖放默认行为  document.addEventListener('drop',function (e) { console.log('document drog');   e.preventDefault(); }); //设置拖拽事件    function openDropEvent() {  box.addEventListener("dragover",function (e) {  console.log('elemenet dragover');   box.classList.add('over');  e.preventDefault(); }); box.addEventListener("dragleave", function (e) {    console.log('elemenet dragleave');  box.classList.remove('over');   e.preventDefault(); }); box.addEventListener("drop", function (e) { e.preventDefault(); //取消浏览器默认拖拽效果   var fileList = e.dataTransfer.files; //获取拖拽中的文件对象   var len=fileList.length;//用来获取文件的长度（其实是获得文件数量）    //检测是否是拖拽文件到页面的操作   if (!len) { box.classList.remove('over');   return; }   box.classList.add('over');  window.willUploadFileList=fileList; }, false);  }   openDropEvent();    function submitUpload() {   var fileList = window.willUploadFileList||[];   if(!fileList.length){   alert('请选择文件'); return; }   var fd = new FormData();   //构造FormData对象   for(var i =0;i<fileList.length;i++){ fd.append('f1', fileList[i]);//支持多文件上传  }   var xhr = new XMLHttpRequest();   //创建对象    xhr.open('POST', 'http://localhost:8100/', true);   xhr.onreadystatechange = function () {  if (xhr.readyState == 4) {  var obj = JSON.parse(xhr.responseText);   //返回值 if(obj.fileUrl.length){ alert('上传成功');  }   }   }   xhr.send(fd);//发送   }   //绑定提交事件    document.getElementById('btn-submit').addEventListener('click',submitUpload);   </script>

 <div class="editor-box" id="editor-box" contenteditable="true" >  可以直接粘贴图片到这里直接上传 </div>

 //光标处插入 dom 节点 function  insertNodeToEditor(editor,ele) {  //插入dom 节点  var range;//记录光标位置对象    var node = window.getSelection().anchorNode;    // 这里判断是做是否有光标判断，因为弹出框默认是没有的 if (node != null) { range = window.getSelection().getRangeAt(0);// 获取光标起始位置 range.insertNode(ele);// 在光标位置插入该对象 } else {    editor.append(ele); }   }   var box = document.getElementById('editor-box');    //绑定paste事件 box.addEventListener('paste',function (event) { var data = (event.clipboardData || window.clipboardData);   var items = data.items; var fileList = [];//存储文件数据  if (items && items.length) {    // 检索剪切板items   for (var i = 0; i < items.length; i++) { console.log(items[i].getAsFile());  fileList.push(items[i].getAsFile());    }   }   window.willUploadFileList = fileList;   event.preventDefault();//阻止默认行为 submitUpload(); });     function submitUpload() {   var fileList = window.willUploadFileList||[];   var fd = new FormData();   //构造FormData对象   for(var i =0;i<fileList.length;i++){ fd.append('f1', fileList[i]);//支持多文件上传  }   var xhr = new XMLHttpRequest();   //创建对象    xhr.open('POST', 'http://localhost:8100/', true);   xhr.onreadystatechange = function () {  if (xhr.readyState === 4) { var obj = JSON.parse(xhr.responseText);   //返回值 console.log(obj);   if(obj.fileUrl.length){ var img = document.createElement('img');    img.src= obj.fileUrl[0];    img.style.width='100px';    insertNodeToEditor(box,img);    // alert('上传成功');   }   }   }   xhr.send(fd);//发送   }   

   //分片逻辑  像操作字符串一样  var start=0,end=0;  while (true) {  end+=chunkSize; var blob = file.slice(start,end);   start+=chunkSize;   if(!blob.size){//截取的数据为空 则结束    //拆分结束  break;  }   chunks.push(blob);//保存分段数据  }   <script>  function submitUpload() {   var chunkSize=2*1024*1024;//分片大小 2M var file = document.getElementById('f1').files[0];  var chunks=[], //保存分片数据 token = (+ new Date()),//时间戳    name =file.name,chunkCount=0,sendChunkCount=0;  //拆分文件 像操作字符串一样 if(file.size>chunkSize){ //拆分文件  var start=0,end=0;  while (true) {  end+=chunkSize; var blob = file.slice(start,end);   start+=chunkSize;   if(!blob.size){//截取的数据为空 则结束    //拆分结束  break;  }   chunks.push(blob);//保存分段数据  }   }else{  chunks.push(file.slice(0)); }   chunkCount=chunks.length;//分片的个数    //没有做并发限制，较大文件导致并发过多，tcp 链接被占光 ，需要做下并发控制，比如只有4个在请求在发送   for(var i=0;i< chunkCount;i++){  var fd = new FormData();   //构造FormData对象   fd.append('token', token);  fd.append('f1', chunks[i]); fd.append('index', i);  xhrSend(fd,function () {    sendChunkCount+=1;  if(sendChunkCount===chunkCount){//上传完成，发送合并请求    console.log('上传完成，发送合并请求');  var formD = new FormData(); formD.append('type','merge');   formD.append('token',token);    formD.append('chunkCount',chunkCount);  formD.append('filename',name);  xhrSend(formD); }   }); }   }   function xhrSend(fd,cb) {   var xhr = new XMLHttpRequest();   //创建对象    xhr.open('POST', 'http://localhost:8100/', true);   xhr.onreadystatechange = function () {  console.log('state change', xhr.readyState);    if (xhr.readyState == 4) {  console.log(xhr.responseText);  cb && cb(); }   }   xhr.send(fd);//发送   }   //绑定提交事件    document.getElementById('btn-submit').addEventListener('click',submitUpload);
</script> 

//二次处理文件，修改名称
app.use((ctx) => {   var body = ctx.request.body;    var files = ctx.request.files ? ctx.request.files.f1:[];//得到上传文件的数组 var result=[];  var fileToken = ctx.request.body.token;// 文件标识  var fileIndex=ctx.request.body.index;//文件顺序 if(files &&  !Array.isArray(files)){//单文件上传容错   files=[files];  }   files && files.forEach(item=>{   var path = item.path;   var fname = item.name;//原文件名称   var nextPath = path.slice(0, path.lastIndexOf('/') + 1) + fileIndex + '-' + fileToken;  if (item.size > 0 && path) { //得到扩展名 var extArr = fname.split('.');  var ext = extArr[extArr.length - 1];    //var nextPath = path + '.' + ext;  //重命名文件 fs.renameSync(path, nextPath);  result.push(uploadHost+nextPath.slice(nextPath.lastIndexOf('/') + 1));  }   }); if(body.type==='merge'){//合并分片文件    var filename = body.filename,   chunkCount = body.chunkCount,   folder = path.resolve(__dirname, '../static/uploads')+'/';  var writeStream = fs.createWriteStream(`${folder}${filename}`); var cindex=0;   //合并文件  function fnMergeFile(){ var fname = `${folder}${cindex}-${fileToken}`;  var readStream = fs.createReadStream(fname);    readStream.pipe(writeStream, { end: false });   readStream.on("end", function () {  fs.unlink(fname, function (err) {   if (err) {  throw err;  }   }); if (cindex+1 < chunkCount){  cindex += 1;    fnMergeFile();  }   }); }   fnMergeFile();  ctx.body='merge ok 200';    }   });

代码略

//获得本地缓存的数据  function getUploadedFromStorage(){  return JSON.parse( localStorage.getItem(saveChunkKey) || "{}"); }   //写入缓存  function setUploadedToStorage(index) {  var obj =  getUploadedFromStorage();    obj[index]=true;        localStorage.setItem(saveChunkKey, JSON.stringify(obj) );   }   //分段对比  var uploadedInfo = getUploadedFromStorage();//获得已上传的分段信息    for(var i=0;i< chunkCount;i++){  console.log('index',i, uploadedInfo[i]?'已上传过':'未上传');   if(uploadedInfo[i]){//对比分段  sendChunkCount=i+1;//记录已上传的索引   continue;//如果已上传则跳过 }   var fd = new FormData();   //构造FormData对象   fd.append('token', token);  fd.append('f1', chunks[i]); fd.append('index', i);  (function (index) { xhrSend(fd, function () {   sendChunkCount += 1;    //将成功信息保存到本地    setUploadedToStorage(index);    if (sendChunkCount === chunkCount) {    console.log('上传完成，发送合并请求');  var formD = new FormData(); formD.append('type', 'merge');  formD.append('token', token);   formD.append('chunkCount', chunkCount); formD.append('filename', name); xhrSend(formD); }   }); })(i);  }   

 /** * filepath = 相对根目录的路径即可 */  async function getFileBufer(filePath) => {   return new Promise((resolve) => {    fs.readFile(filePath, function (err, data) {    var bufer = null;   if (!err) { resolve({   err: err,   data: data  }); }   }); }); }   /** * 上传文件  */  let fetch = require('node-fetch');  let formData = require('form-data');    module.exports = async (options) => {    let {   imgPath } = options;    let data = await getFileBufer(imgPath); if (data.err) { return null;    }   let form = new formData();  form.append('xxx', xxx);    form.append('pic', data.data);  return fetch('http://xx.com/upload', {  body: form, method: 'POST', headers: form.getHeaders()//要活的 form-data的头，否则无法上传   }).then(res => { return res.json();  }).then(data => {    return data;    })  }

    var file = document.getElementById('f1').files[0];   //判断类型  if(f.type!=='image/jpeg' &&  f.type !== 'image/jpg'  ){ alert('只能上传 jpg 图片');   flag=false; break;  }   //判断大小  if(file.size>100*1024){  alert('不能大于100kb'); }   //判断图片尺寸    var img =new Image();   img.onload=function(){  console.log('图片原始大小 width*height', this.width, this.height);    if(this.naturalWidth){  console.log('图片原始大小 naturalWidth*naturalHeight', this.naturalWidth, this.naturalHeight);    }else{  console.log('oImg.width*height', this.width, this.height);  }   }

  <label for="file">Choose file to upload</label>  <input type="file" id="file" name="file" multiple>