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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JsRender for object语法简介
Oct 31 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
JavaScript中Function详解
Feb 27 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
JS实现星星海特效
Dec 24 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 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
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js继承的实现代码
2010/08/05 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
Python命名空间详解
2014/08/18 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
TCP/IP模型的分界线
2012/12/01 面试题
班主任个人工作反思
2014/04/28 职场文书
公司踏青活动方案
2014/08/16 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
单位综合评价意见
2015/06/05 职场文书
学雷锋活动简报
2015/07/20 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python