<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. Xilinx Vivado的使用详细介绍（1）：创建工程、编写代码、行为仿真

    Xilinx Vivado的使用详细介绍(1):创建工程.编写代码.行为仿真 Author:zhangxianhe 新建工程 打开Vivado软件,直接在欢迎界面点击Create New Projec ...

  2. 腾讯云centos7.2安装宝塔面板和LAMP

    1.安装好centos7.2系统后,登录centos系统输入如下命令: yum install -y wget && wget -O install.sh http://downloa ...

  3. idea在本地调试，spark创建hiveContext的时候报错

    spark版本:1.6.1 scala版本:2.10 问题呢场景: 在idea调试本地程序的时候创建hiveContext报错,上午的时候是没有这个问题的,下午在项目中写了一个小deamon,出现了而 ...

  4. 纯css实现轮播(渐变式 less语法)

    下载:https://pan.baidu.com/s/181GkM0EdM5NSqnUcecMS4Q 预览

  5. C++之标准库map

    目录 1.成员函数 2.元素访问 3.迭代器Iterators(C++ 11) 4.容量Capacity 5.修改函数(C++ 11和C++ 17) 6.查找表Lookup 7.观察Observers ...

  6. AngularJs在ng-click函数中获取代表当前元素的DOM对象

    html代码 <div ng-click="test($event)">111</div> Controllers.js $scope.test= func ...

  7. sys 模块的应用

    1.常见的sys模块的应用: 1.在解释器启动后, argv 列表包含了传递给脚本的所有参数, 列表的第一个元素为脚本自身的名称 argv(命令行参数个数) #!/usr/bin/env python ...

  8. python - 初识面向对象

    1.初识面向对象       面向过程:一切以事务的发展流程为中心           优点:负责的问题流程化,编写相对简单         缺点:可扩展性差,只能解决一个问题,改造也会很困难,牵一发 ...

  9. 苹果手机的SB系列（4）你让我除了退出还能按哪个键

    我不知道,他们哪里来的自信,自己的机子就不死机?不设置重新启动? 看看下面这个界面,我按哪个键,全部是灰色的! 今天还有一事纪念,0.4m高的坠地,外屏碎掉了．

  10. Oracle中查看SQL语句的索引命中情况及CPU占用

    第一种: 在PL/SQL中,在Explain plan Window中执行要优化的Sql语句.结果,如下图: Object name列中显示了命中的索引名,Cost列显示了CPU的使用率(%). 第二 ...