<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
<form>
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" @change="getFile($event)">
<button @click="submitForm($event)">提交</button>
</form>
 
<script>
window.onload = function () {
Vue.prototype.$http = axios;
new Vue({
el: 'form',
data: {
name: '',
age: '',
file: ''
},
methods: {
getFile(event) {
this.file = event.target.files[0];
console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData();
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('file', this.file);
 
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
 
this.$http.post('/upload', formData, config).then(function (res) {
if (res.status === 2000) {
/*这里做处理*/
}
})
}
}
})
}
</script>
</body>
 
</html>

vue axios上传文件实例的更多相关文章

  1. 关于vue+axios上传文件的踩坑分析

    上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下. 1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做 ...

  2. vue+axios上传文件

    单独上传文件: <input class="file" name="file" type="file" accept="im ...

  3. PHP+ajaxForm异步带进度条上传文件实例

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...

  4. HTTP的上传文件实例分析

    这个是http文件传输的一种格式,当时不知道这种格式,废弃. HTTP的上传文件实例分析 由于论坛不支持Word写文章发帖. 首先就是附件发送怎么搞,这个必须解决.论坛是php的.我用Chrome类浏 ...

  5. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  6. vue项目上传文件以及进度条

    最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把 ...

  7. php 上传文件实例 上传并下载word文件

    上传界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. JSP通过SmartUpload上传文件实例

    httpRequest.setCharacterEncoding("gbk"); String preName = genName.doMake();//设置文件前缀名 Strin ...

  9. HttpClient 测试web API上传文件实例

    1.使用HttpClient 测试上传文件并且设置header信息: using Lemon.Common; using Newtonsoft.Json; using System; using Sy ...

随机推荐

  1. 从Scratch到Python——Python生成二维码

    # Python利用pyqrcode模块生成二维码 import pyqrcode import sys number = pyqrcode.create('从Scratch到Python--Pyth ...

  2. Wannafly挑战赛1 C MMSet2 虚树

    题目链接:https://www.nowcoder.com/acm/contest/15/C 思路:虚树,取两点间的lca,构造成一颗新的树:求(直径+1)/2即可 #pragma comment(l ...

  3. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  4. YARN详解

    1.1      分布式资源调度框架 1.2.1          yarn的概念 Apache Hadoop YARN (Yet Another Resource Negotiator,另一种资源协 ...

  5. linux基础16-bash编程(case语句及脚本选项 )

    (1) case语句:选择结构 case SWITCH in value1) statement ... ;; //双分号结尾. value2) statement ... ;; *) stateme ...

  6. Headless Service 和Service

    定于spec:clusterIP: None 还记得Service的Cluster IP是做什么的吗?对,一个Service可能对应多个EndPoint(Pod),client访问的是Cluster ...

  7. HIT2019春软件构造->重写hashCode()方法

    不需要重写equals方法: 1.     一个类的每一个实例本质上都是唯一的. 2.     不关心一个类是否提供了“逻辑相等”的测试功能 3.     超类已经改写了equals方法,并且从超类继 ...

  8. rtmp详解

    文件下载地址: 中文:https://files.cnblogs.com/files/bugutian/rtmp_specification_1.0_cn.zip 英文:http://www.adob ...

  9. learning makefile string example

  10. Spring AOP 的实现机制

    作者:大名Dean鼎 http://www.importnew.com/28342.html AOP(Aspect Orient Programming),一般称为面向切面编程,作为面向对象的一种补充 ...