FormData學習筆記
FormData對象：
? ? ? ? ? >通過FormData對象可以組裝一組用 XMLHttpRequest發(fā)送請求的鍵/值對瞒津。它可以更靈活方便的發(fā)送表單數據，因為可以獨立于表單使用携取。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過submit() 方法傳輸的數據格式相同 ? ??
? ? ? ?
?FormData對象的創(chuàng)建以及使用：
```javascript? ? ? ? ? ? ?
var?formData =?new?FormData();
?formData.append("username",?"Groucho");
formData.append("accountnum",?123456);?// 數字 123456 會被立即轉換成字符串 "123456"
// HTML 文件類型input柠贤，由用戶選擇
formData.append("userfile",?fileInputElement.files[0]);
// JavaScript file-like 對象var?content =?'<a id="a"><b id="b">hey!</b></a>';?// 新文件的正文...var?blob =?new?Blob([content],?{?type:?"text/xml"});
?
formData.append("webmasterfile",?blob);
var?request =?new?XMLHttpRequest();
request.open("POST",?"http://foo.com/submitform.php");
request.send(formData);
```
? ? >?FormData對象的append方法香浩，使用鍵值對的方式，例如上述例子的'username'是KEY臼勉，而'Groucho'為value.
? ? ?還有通過表單的形式創(chuàng)建FormData對象邻吭，具體查看MDN，MDN有具體的解釋宴霸，以上示例均來自MDN
axios：
?>? 基于 Promise 的 HTTP 請求客戶端囱晴，可同時在瀏覽器和 node.js 中使用
功能特性
在瀏覽器中發(fā)送 XMLHttpRequests 請求
在 node.js 中發(fā)送 http請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
自動轉換 JSON 數據
客戶端支持保護安全免受 XSRF 攻擊
??具體使用方式以及簡介：https://www.awesomes.cn/repo/mzabriskie/axios
這里用axios主要是結合Vue使用，Vue2.0開始瓢谢，作者就宣布不更新vue-resource畸写，所以決定使用axios.
在vue中使用axios,需要通過NPM insatll后，引入axios模塊
然后設置 Vue的原型后才能使用：
Npm install axios --save
import axios from ‘axios’
Vue.prototype.$http = axios
結合Vue氓扛、axios枯芬、FormData使用的例子：
```
<template>
?????<div id="sample">
????? ??<!--accept定義接收的文件類型,這里只接受圖片-->
????? ??<input id="fileinput" @change="uploading($event)" type="file" accept="image/*">
???????????<button ?@click="submit($event)"></button>
???????????<!--圖片展示-->
???????????<img :src="src"/>
?????</div>
</template>
<script>
export default {
??name: 'sample',
??data () {
????return {
????????file:'',
????????src:''
????};
??},
??methods:{
?? uploading(event){
?? this.file = event.target.files[0];//獲取文件
?? ????var windowURL = window.URL || window.webkitURL;
????????this.file = event.target.files[0];
????????//創(chuàng)建圖片文件的url
????????this.src = windowURL.createObjectURL(event.target.files[0]);
?? },
?? submit(){
?? event.preventDefault();//取消默認行為
?? let formdata = new FormData();
?? formdata.append('file',this.file);
?? let config = {
????????????headers: {
????????????????'Content-Type': 'multipart/form-data' ?//之前說的以表單傳數據的格式來傳遞fromdata
????????????}
????????};
????????this.$http.post('/upload', formData, config).then( (res) => {
???????//做處理
????}).catch((error) =>{
????});
?? }
??}
};
</script>
<style lang="css" scoped>
</style>
```
使用這些知識點運用在自己的項目中做了一個例子：
??點擊攝像頭上傳圖片文件后獲取文件并展示：
知識點參考鏈接：
FormData:MDN
Vue :Vue官網
axios:axios的簡介與使用
axios結合formData使用：點擊打開鏈接
