---

(1)原理概述

就是根據(jù) http 協(xié)議的規(guī)范和定義，完成請(qǐng)求消息體的封裝和消息體的解析，然后將二進(jìn)制內(nèi)容保存到文件。

我們都知道如果要上傳一個(gè)文件，需要把 form 標(biāo)簽的enctype設(shè)置為multipart/form-data,同時(shí)method必須為post方法。

那么multipart/form-data表示什么呢？

multipart互聯(lián)網(wǎng)上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。

multipart/form-data 結(jié)構(gòu)

看下 http 請(qǐng)求的消息體

解析

---

(2)最原始的文件上傳

使用 form 表單上傳文件

在 ie時(shí)代，如果實(shí)現(xiàn)一個(gè)無刷新的文件上傳那可是費(fèi)老勁了，大部分都是用 iframe 來實(shí)現(xiàn)局部刷新或者使用 flash 插件來搞定，在那個(gè)時(shí)代 ie 就是最好用的瀏覽器（別無選擇）。

這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗(yàn)很差，導(dǎo)致頁面刷新，頁面其他數(shù)據(jù)丟失。

HTML

<form method="post" action="http://localhost:8100" enctype="multipart/form-data">選擇文件:<input type="file" name="f1"/> input 必須設(shè)置 name 屬性，否則數(shù)據(jù)無法發(fā)送<br/> <br/>標(biāo)題：<input type="text" name="title"/><br/><br/><br/><button type="submit" id="btn-0">上 傳</button></form>

---

(3)文件上傳接口

NODE

/*** 服務(wù)入口*/ 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: {//設(shè)置文件的默認(rèn)保存目錄，不設(shè)置則保存在系統(tǒng)臨時(shí)目錄下 osuploadDir: path.resolve(__dirname, '../static/uploads')},multipart: true // 開啟文件上傳，默認(rèn)是關(guān)閉 }));//開啟靜態(tài)文件訪問 app.use(koaStatic(path.resolve(__dirname, '../static') ));//文件二次處理，修改名稱 app.use((ctx) => {var file = ctx.request.files.f1;//得道文件對(duì)象var path = file.path;var fname = file.name;//原文件名稱var nextPath = path+fname;if(file.size>0 && path){//得到擴(kuò)展名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 ...... ');

---

(4)多文件上傳

HTML

//設(shè)置 multiple屬性 <input type="file" name="f1" multiple/>

NODE

服務(wù)端也需要進(jìn)行簡(jiǎn)單的調(diào)整，由單文件對(duì)象變?yōu)槎辔募?shù)組，然后進(jìn)行遍歷處理。

//二次處理文件，修改名稱 app.use((ctx) => {var files = ctx.request.files.f1;// 多文件， 得到上傳文件的數(shù)組var result=[];//遍歷處理files && files.forEach(item=>{var path = item.path;var fname = item.name;//原文件名稱var nextPath = path + fname;if (item.size > 0 && path) {//得到擴(kuò)展名var extArr = fname.split('.');var ext = extArr[extArr.length - 1];var nextPath = path + '.' + ext;//重命名文件fs.renameSync(path, nextPath);//文件可訪問路徑放入數(shù)組result.push(uploadHost+ nextPath.slice(nextPath.lastIndexOf('/') + 1));}});//輸出 json 結(jié)果ctx.body = `{"fileUrl":${JSON.stringify(result)}}`; })

---

(5)局部刷新 - iframe

HTML

<iframe id="temp-iframe" name="temp-iframe" src="" style="display:none;"></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 必須設(shè)置 name 屬性，否則數(shù)據(jù)無法發(fā)送<br/> <br/>標(biāo)題：<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;//接口數(shù)據(jù)轉(zhuǎn)換為 JSON 對(duì)象var obj = JSON.parse(result);if(obj && obj.fileUrl.length){alert('上傳成功');}console.log(obj); });</script>

---

(6)無刷新上傳

HTML

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

JS xhr

<script>function submitUpload() {//獲得文件列表，注意這里不是數(shù)組，而是對(duì)象var fileList = document.getElementById('f1').files;if(!fileList.length){alert('請(qǐng)選擇文件');return;}var fd = new FormData(); //構(gòu)造FormData對(duì)象fd.append('title', document.getElementById('title').value);//多文件上傳需要遍歷添加到 fromdata 對(duì)象for(var i =0;i<fileList.length;i++){fd.append('f1', fileList[i]);//支持多文件上傳}var xhr = new XMLHttpRequest(); //創(chuàng)建對(duì)象xhr.open('POST', 'http://localhost:8100/', true);xhr.send(fd);//發(fā)送時(shí) Content-Type默認(rèn)就是: 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>

JS Fetch

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));

---

(7)多文件，單進(jìn)度

特別提醒

HTML

<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>

JS

<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('請(qǐng)選擇文件');return;}var fd = new FormData(); //構(gòu)造FormData對(duì)象fd.append('title', document.getElementById('title').value);for(var i =0;i<fileList.length;i++){fd.append('f1', fileList[i]);//支持多文件上傳}var xhr = new XMLHttpRequest(); //創(chuàng)建對(duì)象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){//進(jìn)度條變色progressSpan.classList.add('green');}console.log('已上傳',completedPercent);}}//注意 send 一定要寫在最下面，否則 onprogress 只會(huì)執(zhí)行最后一次 也就是100%的時(shí)候xhr.send(fd);//發(fā)送時(shí) Content-Type默認(rèn)就是: multipart/form-data; }//綁定提交事件document.getElementById('btn-submit').addEventListener('click',submitUpload);</script>

---

(8)多文件上傳+預(yù)覽+取消

上一個(gè)栗子的多文件上傳只有一個(gè)進(jìn)度條，有些需求可能會(huì)不大一樣，需要觀察到每個(gè)文件的上傳進(jìn)度，并且可以終止上傳。

HTML

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

JS

<script>//更改網(wǎng)絡(luò) 為慢3g，就可以比較明顯的看到進(jìn)度條了var fileMaxCount=6;var imgBox =document.getElementsByClassName('img-box')[0];var willUploadFile=[];//保存待上傳的文件以及相關(guān)附屬信息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];//先預(yù)覽圖片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 () {//顯示要是否這塊兒內(nèi)存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(); //構(gòu)造FormData對(duì)象fd.append('f1',file);var xhr = new XMLHttpRequest(); //創(chuàng)建對(duì)象xhr.open('POST', 'http://localhost:8100/', true);xhr.onreadystatechange = function () {console.log('state change', xhr.readyState);//調(diào)用 abort 后，state 立即變成了4,并不會(huì)變成0//增加自定義屬性 xhr.uploadedif (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){//進(jìn)度條變色progressSpan.classList.add('green');}if(completedPercent>=100){xhr.uploaded=true;}console.log('已上傳',completedPercent);}}//注意 send 一定要寫在最下面，否則 onprogress 只會(huì)執(zhí)行最后一次 也就是100%的時(shí)候xhr.send(fd);//發(fā)送時(shí) Content-Type默認(rèn)就是: multipart/form-data; return xhr;}//文件上傳function submitUpload(willFiles) {if(!willFiles.length){return;}//遍歷文件信息進(jìn)行上傳willFiles.forEach(function (item) {xhrSend({file:item.file,progress:item.progress});});}//綁定提交事件document.getElementById('btn-submit').addEventListener('click',function () {submitUpload(willUploadFile);});</script>

---

(9)拖拽上傳

html5的出現(xiàn)，讓拖拽上傳交互成為可能，現(xiàn)在這樣的體驗(yàn)也屢見不鮮。

HTML

<div class="drop-box" id="drop-box">拖動(dòng)文件到這里,開始上傳</div><button type="button" id="btn-submit">上 傳</button>

JS

<script>var box = document.getElementById('drop-box');//禁用瀏覽器的拖放默認(rèn)行為document.addEventListener('drop',function (e) {console.log('document drog');e.preventDefault();});//設(shè)置拖拽事件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(); //取消瀏覽器默認(rèn)拖拽效果var fileList = e.dataTransfer.files; //獲取拖拽中的文件對(duì)象var len=fileList.length;//用來獲取文件的長(zhǎng)度（其實(shí)是獲得文件數(shù)量）//檢測(cè)是否是拖拽文件到頁面的操作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('請(qǐng)選擇文件');return;}var fd = new FormData(); //構(gòu)造FormData對(duì)象for(var i =0;i<fileList.length;i++){fd.append('f1', fileList[i]);//支持多文件上傳}var xhr = new XMLHttpRequest(); //創(chuàng)建對(duì)象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);//發(fā)送}//綁定提交事件document.getElementById('btn-submit').addEventListener('click',submitUpload);</script>

---

(11)剪貼板上傳

HTML

<div class="editor-box" id="editor-box" contenteditable="true" >可以直接粘貼圖片到這里直接上傳</div>

JS

//光標(biāo)處插入 dom 節(jié)點(diǎn)function insertNodeToEditor(editor,ele) {//插入dom 節(jié)點(diǎn)var range;//記錄光標(biāo)位置對(duì)象var node = window.getSelection().anchorNode;// 這里判斷是做是否有光標(biāo)判斷，因?yàn)閺棾隹蚰J(rèn)是沒有的if (node != null) {range = window.getSelection().getRangeAt(0);// 獲取光標(biāo)起始位置range.insertNode(ele);// 在光標(biāo)位置插入該對(duì)象} 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 = [];//存儲(chǔ)文件數(shù)據(jù)if (items && items.length) {// 檢索剪切板itemsfor (var i = 0; i < items.length; i++) {console.log(items[i].getAsFile());fileList.push(items[i].getAsFile());}}window.willUploadFileList = fileList;event.preventDefault();//阻止默認(rèn)行為submitUpload();}); function submitUpload() {var fileList = window.willUploadFileList||[];var fd = new FormData(); //構(gòu)造FormData對(duì)象for(var i =0;i<fileList.length;i++){fd.append('f1', fileList[i]);//支持多文件上傳}var xhr = new XMLHttpRequest(); //創(chuàng)建對(duì)象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);//發(fā)送}

---

(12)大文件上傳-分片

HTML

代碼略，只需要一個(gè) input file 標(biāo)簽。

JS

//分片邏輯 像操作字符串一樣var start=0,end=0;while (true) {end+=chunkSize;var blob = file.slice(start,end);start+=chunkSize;if(!blob.size){//截取的數(shù)據(jù)為空 則結(jié)束//拆分結(jié)束break;}chunks.push(blob);//保存分段數(shù)據(jù)}<script>function submitUpload() {var chunkSize=2*1024*1024;//分片大小 2Mvar file = document.getElementById('f1').files[0];var chunks=[], //保存分片數(shù)據(jù)token = (+ new Date()),//時(shí)間戳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){//截取的數(shù)據(jù)為空 則結(jié)束//拆分結(jié)束break;}chunks.push(blob);//保存分段數(shù)據(jù)}}else{chunks.push(file.slice(0));}chunkCount=chunks.length;//分片的個(gè)數(shù) //沒有做并發(fā)限制，較大文件導(dǎo)致并發(fā)過多，tcp 鏈接被占光 ，需要做下并發(fā)控制，比如只有4個(gè)在請(qǐng)求在發(fā)送for(var i=0;i< chunkCount;i++){var fd = new FormData(); //構(gòu)造FormData對(duì)象fd.append('token', token);fd.append('f1', chunks[i]);fd.append('index', i);xhrSend(fd,function () {sendChunkCount+=1;if(sendChunkCount===chunkCount){//上傳完成，發(fā)送合并請(qǐng)求console.log('上傳完成，發(fā)送合并請(qǐng)求');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(); //創(chuàng)建對(duì)象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);//發(fā)送}//綁定提交事件document.getElementById('btn-submit').addEventListener('click',submitUpload); </script>

注意點(diǎn)

//二次處理文件，修改名稱 app.use((ctx) => {var body = ctx.request.body;var files = ctx.request.files ? ctx.request.files.f1:[];//得到上傳文件的數(shù)組var result=[];var fileToken = ctx.request.body.token;// 文件標(biāo)識(shí)var fileIndex=ctx.request.body.index;//文件順序if(files && !Array.isArray(files)){//單文件上傳容錯(cuò)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) {//得到擴(kuò)展名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';}});

---

(13)大文件上傳-斷點(diǎn)續(xù)傳

生成 hash 過程肯定也會(huì)耗費(fèi)資源，但是和重新上傳相比可以忽略不計(jì)了

JS
模擬分段保存，本地保存到localStorage

//獲得本地緩存的數(shù)據(jù)function getUploadedFromStorage(){return JSON.parse( localStorage.getItem(saveChunkKey) || "{}");}//寫入緩存function setUploadedToStorage(index) {var obj = getUploadedFromStorage();obj[index]=true; localStorage.setItem(saveChunkKey, JSON.stringify(obj) );}//分段對(duì)比var uploadedInfo = getUploadedFromStorage();//獲得已上傳的分段信息for(var i=0;i< chunkCount;i++){console.log('index',i, uploadedInfo[i]?'已上傳過':'未上傳');if(uploadedInfo[i]){//對(duì)比分段sendChunkCount=i+1;//記錄已上傳的索引continue;//如果已上傳則跳過}var fd = new FormData(); //構(gòu)造FormData對(duì)象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('上傳完成，發(fā)送合并請(qǐng)求');var formD = new FormData();formD.append('type', 'merge');formD.append('token', token);formD.append('chunkCount', chunkCount);formD.append('filename', name);xhrSend(formD);}});})(i);}

(14) node 端上傳圖片

node

/*** filepath = 相對(duì)根目錄的路徑即可*/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;})}

---

(15)其他

JS

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);}}

---

(16)input file 外觀更改

總結(jié)

以上是生活随笔為你收集整理的文件上传攻略的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。