Vue 使用formData方式向后台发送数据的实现


Posted in Javascript onApril 14, 2019

很多时候在使用form向后台发送数据的时候,并不需要使用到表单组件。

例如时间戳、ip等,这个时候除了ajax之外,还可以使用HTML5的一个全新方法FormData;在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储;此过程较为复杂;

使用formdata,只需创建新的formdata对象,将要发送的数据添加进去,后台即可接收;数据以及文件对象皆可;

1. 基本使用方式

template

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

JavaScript

update (e) {
  let file = e.target.files[0]
  // console.log(file)
  let param = new FormData() // 创建form对象
  param.append('file', file, file.name) // 通过append向form对象添加数据
  param.append('id', this.$store.state.userId) // 添加form表单中其他数据
   // withCredentials: true 使得后台可以接收表单数据 跨域请求
  const instance = axios.create({
    withCredentials: true
  })
  // url为后台接口
  instance.post('url', param)
    .then(this.succ) // 成功返回信息 调用函数 函数需自己定义,此处后面省略
    .catch(this.serverError) // 服务器错误 调用对应函数 函数需自己定义,此处后面省略
}

2. 美化 input file 按钮 (拓展)

思路:

  1. 简单粗暴地隐藏:opacity: 0;
  2. 在 <input class="file"> 元素节点的位置上创建一个好看的元素节点,比如img
  3. 将 <input class="file"> 元素的z轴变高,使得其覆盖<img/> :z-index: 5;
  4. 因为 <input class="file"> 是透明的,那么我们就只看见它同xy上的好看的<img />
  5. 点击这个好看的<img /> 其实是点击了它上层的表单

以上思路可以实现点击用户头像,通过表单上传更换头像,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 #Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 #Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 #Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 #Javascript
js中async函数结合promise的小案例浅析
Apr 14 #Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 #Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 #Javascript
You might like
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python 实现两个线程交替执行
2020/05/02 Python
Python jieba库分词模式实例用法
2021/01/13 Python
HEMA法国:荷兰原创设计
2019/02/21 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
电信营业员自我评价分享
2014/01/17 职场文书
趣味比赛活动方案
2014/02/15 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
志愿者个人总结
2015/03/03 职场文书
高中军训感想
2015/08/07 职场文书