new FormData() 前端上傳文件圖片到服務器

關於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的圖片路徑
複製代碼

更多內容請點擊