<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<div id="app" v-cloak>
<input type="text" v-model="param.title">
<input type="text" v-model="param.content">
<input type="file" @change="getFile($event,'file_avatar')">
<input type="file" @change="getFile($event,'file_thumb')">
<button @click="submitForm($event)">OK</button>
</div> <script>
new Vue({
el: '#app',
data: {
param: {
title: info.title,
content: info.content,
file_avatar: '',
file_thumb: '',
},
formData: new FormData(), },
mounted: function () { },
methods: {
getFile(event, input_file_name) {
this.formData.append(input_file_name, event.target.files[]);
},
submitForm(event) {
event.preventDefault();
for (let i in this.param) {
this.formData.append(i, this.param[i]);
}
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
this.$http.post('/url', this.formData, config).then(function (res) {
if (res.status === ) {
console.log(res);
}
}).catch((error) => {
console.log(error);
});
}
}, });
</script>
 

单独上传文件:

<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 form表单上传文件的更多相关文章

  1. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  2. 巨蟒python全栈开发django11:ajax&&form表单上传文件contentType

    回顾: 什么是异步? 可以开出一个线程,我发出请求,不用等待返回,可以做其他事情. 什么是同步? 同步就是,我发送出了一个请求,需要等待返回给我信息,我才可以操作其他事情. 局部刷新是什么? 通过jq ...

  3. 使用form表单上传文件

    在使用form表单上传文件时候,input[type='file']是必然会用的,其中有一些小坑需要避免. 1.form的 enctype="multipart/form-data" ...

  4. JsonResponse类的使用、form表单上传文件补充、CBV和FBV、HTML的模板语法之传值与过滤器

    昨日内容回顾 Django请求生命周期 # 1.浏览器发起请求 到达Django的socket服务端(web服务网关接口) 01 wsgiref 02 uwsgi + nginx 03 WSGI协议 ...

  5. PHP 后台程序配置config文件,及form表单上传文件

    一,配置config文件 1获取config.php文件数组, 2获取form 表单提交的值 3保存更新config.php文件,代码如下: $color=$_POST['color']; $back ...

  6. nodejs 模拟form表单上传文件

    使用nodejs来模拟form表单进行文件上传,可以同时上传多个文件. 以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的 ...

  7. form表单上传文件使用multipart请求处理

    在开发Web应用程序时比较常见的功能之一,就是允许用户利用multipart请求将本地文件上传到服务器,而这正是Grails的坚固基石——spring MVC其中的一个优势.Spring通过对Serv ...

  8. 通过form表单上传文件获取后台传来的数据

    小伙伴是不是遇到过这样的问题,通过submit提交form表单的时候,不知怎么获取后台传来的返回值.有的小伙伴就会说你不会发送ajax,其实也会.假如提交的form表单中含有文件,怎么办? 步骤1:想 ...

  9. form表单上传文件

    一.formData()直接获取form表单数据 例子:获取form表单的id给formData(),然后传给后台. 要求: 传入值的name值必须与后台接受的name相对应. form表单不能嵌套, ...

随机推荐

  1. Docker 0x02: Docker生态

    目录 Docker生态 Docker官网 0x00 网址 Docker组件 0x01. docker-client 与 docker-daemon 0x02. docker镜像 0x03. docke ...

  2. python语言的堆栈与队列类的实现

    基于python语言的数据结构之堆栈与队列的实现 # 堆栈的实现 # -*- coding: utf-8 -*- """ 栈(stack), 是一种容器,可以存入数据元素 ...

  3. java常见数据结构的时间复杂度总结

  4. php构建型模式(Builder pattern)

    练代码,增加了调用时的输出. <?php /* The builder pattern separates the construction of a complex object from i ...

  5. jmeter针对websocket协议的压测

    之前一直没有接触过websocket协议,所以一直对websocket的压测存在疑惑,在网上参考文章并不断尝试之后,终于有所得:第一次用jmeter的websoket插件,用的ws非加密协议,请求都能 ...

  6. Vuex状态数据源state

    (1)单一状态树 Vuex 使用单一状态,用一个对象就包含了全部的应用层级状态.至此它便作为一个“唯一数据源 (SSOT)”而存在.这也意味着,每个应用将仅仅包含一个 store 实例. 单一状态树让 ...

  7. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  8. shell脚本中大于,大于等于,小于,小于等于、不等于的表示方法

    症状:shell中大于,大于等于,小于等于,lt,gt ,ne,ge,le 很对应. 应对方法: 大于 -gt (greater than) 小于 -lt (less than) 大于或等于 -ge ...

  9. spark调优——算子调优

    算子调优一:mapPartitions 普通的map算子对RDD中的每一个元素进行操作,而mapPartitions算子对RDD中每一个分区进行操作.如果是普通的map算子,假设一个partition ...

  10. Linux套接字与虚拟文件系统(1):初始化和创建

    http://www.cppblog.com/qinqing1984/archive/2015/05/03/210521.html 引言   在Unix的世界里,万物皆文件,通过虚拟文件系统VFS,程 ...