学习笔记
FormData对象：
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同
FormData对象的创建以及使用：
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.
还有通过表单的形式创建FormData对象，具体查看点击打开链接，MDN有具体的解释，以上示例均来自MDN
axios：
基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
功能特性
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 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];
//创建图片文件的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使用：点击打开链接