Vue axios与FormData结合提交文件，并且展示用户图片文件

FormData学习笔记

FormData对象：

          >通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同     

       

 FormData对象的创建以及使用：

```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 = 'hey!'; // 新文件的正文...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有具体的解释，以上示例均来自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使用的例子：

```

```

使用这些知识点运用在自己的项目中做了一个例子：

  点击摄像头上传图片文件后获取文件并展示：

知识点参考链接：

FormData:MDN

Vue :Vue官网

axios:axios的简介与使用

axios结合formData使用：点击打开链接