单独上传文件:

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
methods: {
update(e){
let file = e.target.files[0];
let param = new FormData(); //创建form对象
param.append('file',file);//通过append向form对象添加数据
console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加请求头
this.$http.post('http://127.0.0.1:8081/upload',param,config)
.then(response=>{
console.log(response.data);
})
}
}

Form表单上传文件:

<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>
    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('http://127.0.0.1:8081/upload', formData, config).then(function (response) {
if (response.status === 200) {
console.log(response.data);
}
})
}
}

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

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

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

  2. vue axios上传文件实例

    <head> <title></title> <meta charset="UTF-8"> <meta name=" ...

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

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

  4. 使用axios上传文件到阿里云对象文件存储服务器oss

    背景 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可以直接向OSS写入或读取数据.OSS支持流式写入和文件写入两种方式.使用阿里云oss做文件存储的时候,不可 ...

  5. 5.Vue临时上传文件夹

    1.在项目目录中,通过npm install multiparty进行安装必要组件npm install multiparty --save-dev 2.app.js中添加app.use(bodyPa ...

  6. Vue.js 上传文件(后台使用.net)

    页面部分 <div id="app"> <form id="myform"> <input type="file&quo ...

  7. Ant Design Upload 组件上传文件到云服务器 - 七牛云、腾讯云和阿里云的分别实现

    在前端项目中经常遇到上传文件的需求,ant design 作为 react 的前端框架,提供的 upload 组件为上传文件提供了很大的方便,官方提供的各种形式的上传基本上可以覆盖大多数的场景,但是对 ...

  8. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  9. 如何使用vue的axios结合PHP去上传文件

    我们在做表单提交的时候,往往会碰到一些表单提交的需求,那vue的axios与上传文件碰撞后不会出现什么不一样的火花吗,听我一一道来: 首先,我们需要对写一个vue的axios的表单提交,由于本人用的是 ...

随机推荐

  1. eclipse到Android Studio的项目迁移

    一直以来.公司开发都是用eclipse.可是随着我们应用不断成长.项目结构越来越庞大.项目间依赖关系变得非常复杂.用eclipse管理显得非常吃力,常常一个同事更改依赖项目之后,别人在更新.都会出现故 ...

  2. C/C++生成可执行文件过程

    编译的概念:编译程序读取源程序(字符流),对之进行词法和语法的分析,将高级语言指令转换为功能等效的汇编代码,再由汇编程序转换为机器语言,并且按照操作系统对可执行文件格式的要求链接生成可执行程序.编译的 ...

  3. 创建类模式大PK(总结)

    创建类模式包含工厂方法模式.建造者模式.抽象工厂模式.单例模式和原型模式,它们都可以提供对象的创建和管理职责.当中的单例模式和原型模式很easy理解,单例模式是要保持在内存中仅仅有一个对象,原型模式是 ...

  4. Android 4.4.2 动态加入JNI库方法记录 (一 JNI库层)

    欢迎转载,务必注明出处.http://blog.csdn.net/wang_shuai_ww/article/details/44456755 本篇是继<s5p4418 Android 4.4. ...

  5. 【bzoj2282】[Sdoi2011]消防

    两次bfs可得直径,答案一定不会小于所有点到直径的距离最大值,只要把直径上的边权设为0,任选直径上一点bfs可得将最大值作为二分下界,二分直径左右端点的舍弃部分 #include<algorit ...

  6. 动态代理3--Spring AOP分析

    Spring AOP的基本实现方式 ​Spring AOP,一种模块化机制,能够动态的对切点添加行为,而不破坏原有的代码结构. 这是一个非常好地动态代理的应用方式.Spring AOP实现依赖于JDK ...

  7. 解决Eclipse alt+/不出来提示的问题

    1. 检查windows ——preferences ——java ——editor —— content assist - advanced,在右上方有一行“select the proposal ...

  8. html5 canvas程序演示--P1197 [JSOI2008]星球大战

    html5 canvas程序演示--P1197 [JSOI2008]星球大战 <!doctype html> <html> <head> <meta char ...

  9. 【JSOI 2011】 分特产

    [题目链接] 点击打开链接 [算法] 考虑求每个人可以不分的方案 那么,对于每件物品,我们把它分成n份,每一份对应分给每一个人,有C(a[i]+n-1,m-1)种方案,而总方案数就是每种 物品方案数的 ...

  10. 洛谷 P1979 [ NOIP 2013 ] 华容道 —— bfs + 最短路

    题目:https://www.luogu.org/problemnew/show/P1979 真是一道好题... 首先考虑暴力做法,应该是设 f[i][j][x][y] 记录指定棋子和空格的位置,然后 ...