關於FormData
XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以
異步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
用處
上傳文件的格式一般是
- base64格式
- new FormData (ios,andorid只支持FormData 卻不支持base64)
網上通俗的教程
通過傳統的form表單提交的方式上傳文件：
<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >測試通過Rest接口上傳文件 </h1> <p >指定文件名： <input type ="text" name="filename" /></p> <p >上傳文件： <input type ="file" name="file" /></p> <p >關鍵字1： <input type ="text" name="keyword" /></p> <p >關鍵字2： <input type ="text" name="keyword" /></p> <p >關鍵字3： <input type ="text" name="keyword" /></p> <input type ="submit" value="上傳"/> </form> 復制代碼不過傳統的form表單提交會導致頁面刷新，但是在有些情況下，我們不希望頁面被刷新，這種時候我們都是使用Ajax的方式進行請求的。
目前很多框架都不簡單的html格式，更多是vue + axios（ajax） / react + ajax方式來提交
新框架formData()新用法
var formData = new FormData(); // 利用append的內置方式 formData.append("username", "Groucho"); formData.append("accountnum", 123456); // 數字 123456 會被立即轉換成字符串 "123456" formData.append("userfile", fileInputElement.files[0]); $.ajax({ url : "http://localhost:8080/STS/rest/user", type : "POST", data : formData, success : function(data) { console.log(data) }, error : function(data) { console.log(data) } });
注意：直接打印會獲取空
W3c草案提供了三種方案來獲取或修改FormData。
想得到一個FormData對象：
var formdata = new FormData();
方案1：創建一個空的FormData對象，然后再用append方法逐個添加鍵值對：
var formdata = new FormData();
formdata.append("name", "呵呵"); formdata.append("url", "http://www.baidu.com/"); 復制代碼方案2：取得form元素對象，將它作為參數傳入FormData對象中！
var formobj = document.getElementById("form"); var formdata = new FormData(formobj); 復制代碼方案3：利用form元素對象的getFormData方法生成它！
var formobj = document.getElementById("form"); var formdata = formobj.getFormData() 復制代碼FormData 內置API方法
- FormData.append
- FormData.delete
- FormData.get
- FormData.getAll
- FormData.has
- FormData.set
node koa2接受前端FormData()的傳值
const Koa = require('koa') const koaBody = require(‘koa-body’); Koa(koaBody({multipart: true})); 復制代碼koa2后台操作
// router.js
.post(Api('uploadImage'), lib.uploadImage) // router_api.js exports.uploadImage = async(ctx, next)=> { let body = ctx.request.body; let articleId = body.fields.articleId; let image = body.files.image; let filename = image.name; let avatarName = Date.now() + '_' + filename; let readStream = fs.createReadStream(image.path) let writeStream = fs.createWriteStream(uploadDir + avatarName); readStream.pipe(writeStream); ctx.body = {flag: '1' ,msg:'',data: {url: config[env].host + '/' + uploadDir + avatarName}} } // ctx.body 返回url 保存到koa文件中的public的圖片路徑
.