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在IE与firefox的差异集锦
Nov 11 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
react 组件传值的三种方法
Jun 03 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 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
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
JS二分查找算法详解
2017/11/01 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Pycharm安装python库的方法
2020/11/24 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
2015年体育教学工作总结
2015/05/20 职场文书