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 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
JS严格模式知识点总结
Feb 27 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
js实现简单扫雷
Nov 27 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
python的类方法和静态方法
2014/12/13 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
公证委托书模板
2014/04/03 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
高一军训决心书
2015/02/05 职场文书
公司年会开场白
2015/06/01 职场文书
大国崛起英国观后感
2015/06/02 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android