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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
js实现简单锁屏功能实例
May 27 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
bootstrap table小案例
2016/10/21 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
java判断三位数的实例讲解
2019/06/10 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python进程池Pool应用实例分析
2019/11/27 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
.net软件工程师面试题
2015/03/31 面试题
体育学院毕业生自荐信
2013/11/03 职场文书
大班幼儿评语大全
2014/04/30 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书