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

 学习笔记

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使用：点击打开链接