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

 

 

 

 

 

 

 

 

 


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值