<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. react的this.setState没有触发render

    一.浅比较 出现情况: 明明改变了值, 并且回调函数也触发了, 但是就是不触发render import React, { PureComponent } from 'react' import { ...

  2. Win10提示“因为文件共享不安全，所以你不能连接到文件共享”如何处理

    在使用Windows10 1803版本系统连接CentOS6.5下搭建的Samba服务时,发现打开共享文件会遇到以下提示: 其实,该问题是Win10版本不兼容导致的.微软官方说明:https://go ...

  3. UI组件--element-ui--Upload多组件自定义上传

    需求: 提交详细信息的表单, 并上传对应图片(如下图), 后台接口要求表单数据和图片需要一次上传完成.. 分析: 实际上, 每个element-ui Upload组件都应发送一次请求, 很明显不符合我 ...

  4. MySQL 存储过程 if语句

    MySQL  存储过程 if语句 MySQL IF语句允许您根据表达式的某个条件或值结果来执行一组SQL语句. 要在MySQL中形成一个表达式,可以结合文字,变量,运算符,甚至函数来组合.表达式可以返 ...

  5. 2018-2019-2 20175317 实验二《Java面向对象程序设计》实验报告

    2018-2019-2 20175317 实验二<Java面向对象程序设计>实验报告 一.实验步骤及内容 面向对象程序设计-1 参考 http://www.cnblogs.com/roce ...

  6. 关于最新create-react-app使用react-app-rewired2.x添加webpack配置

    使用过create-react-app(以下简称cra)的朋友都知道,这是react官方的一款脚手架工具,内部集成了babel,webpack,webpack-dev-server等等. 以前我们要在 ...

  7. JavaJDK8新特性相关知识整理

    1.新增接口默认方法和接口静态方法     接口默认方法用default关键字修饰,与抽象方法不同之处在于抽象方法必须要求实现,而默认方法没有这个要求,默认方法本身已经有具体的实现,所有的接口实现类将 ...

  8. POST调用WCF方法-项目实践

    做即时通信项目时,需要与OA系统对接接口,主要目标是实现在OA里进行一项事项,通过调用我们的接口,即时通知过来,并弹出消息框提示一下.我们的即时通信使用的WCF服务进行通信,在客户端调用通信时,用的就 ...

  9. 【C/C++】数组 & 指针

    int main() { ]; ]; ][]; ]; ]; ]; ][]; cout << sizeof(a) << endl; cout << sizeof(pa ...

  10. angular6 aot 预先编译

    angular.json文件:(红色加粗部分) { "$schema": "./node_modules/@angular/cli/lib/config/schema.j ...