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 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jqgrid 简单学习笔记
May 03 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
实用函数8
2007/11/08 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
jquery操作select元素和option的实例代码
2016/02/03 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python实现视频读取和转化图片
2019/12/10 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
公司出纳岗位职责
2013/12/07 职场文书
高中生活自我鉴定
2014/01/18 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
结婚喜宴主持词
2014/03/14 职场文书
基层党员公开承诺书
2014/05/29 职场文书
询价采购方案
2014/06/09 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
保送生自荐信范文
2015/03/26 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
Window server中安装Redis的超详细教程
2021/11/17 Redis
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers