Vue 使用formData方式向后台发送数据的实现

很多时候在使用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 /> 其实是点击了它上层的表单

以上思路可以实现点击用户头像，通过表单上传更换头像，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • axios post提交formdata的实例

    vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios.但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数.后来进过一番探索,终于发现问题所在. post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以

  • vue使用axios上传文件(FormData)的方法

    在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件. 过多介绍不说,过多的煽情语句不说,直接来来干活,希望对广大博友有所帮助.也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数 <!--文件上传表单--> <form> <input type="text" value="&

  • Vue 设置axios请求格式为form-data的操作步骤

    Cover 在Vue中使用axios 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目下执行npm install axios. 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封装了get方法,传入请求

  • Vue axios 将传递的json数据转为form data的例子

    修改main.js文件中axios的配置: 在发送请求前将数据用qs模块转化 修改请求头的Content-Type='application/x-www-form-urlencoded' 具体配置如下: import axios from 'axios' import qs from 'qs' // 添加请求拦截器 axios.interceptors.request.use(function (config) { if(config.method!='get'){ config.data=qs

  • 使用axios请求时,发送formData请求的示例

    最近做的一个项目中有一个特例接口,传json后端接收不到,对接的后端又不愿意改接口,只能用formData方式传参,由于好多年没有用过formData,头痛了一会,找到了解决方法,发现非常简单,在此做个笔记! var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); fetch('/us

  • Vue 使用formData方式向后台发送数据的实现

    很多时候在使用form向后台发送数据的时候,并不需要使用到表单组件. 例如时间戳.ip等,这个时候除了ajax之外,还可以使用HTML5的一个全新方法FormData:在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储:此过程较为复杂: 使用formdata,只需创建新的formdata对象,将要发送的数据添加进去,后台即可接收

  • herf=#导致Ajax请求时没有向后台发送数据

    今天在做右键菜单,当点击重命名进行Ajax请求时,并没有向后台发送数据而是直接跳转到了首页.朕百思不得其解,后来在前台页面发现一个问题: 复制代码 代码如下: <span style="font-size:24px;"><li><a href='#' onclick="renameContactsFunction()">重命名</a></li></span> 原来就是这个herf='#'惹的祸.

  • vue.js配合$.post从后台获取数据简单demo分享

    首先导入 <script type="text/javascript" src="/island/stage/js/vue.min.js"></script> html样式: <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="i

  • vue中formdata传值给后台时参数为空的问题

    vue中formdata传值给后台时参数为空的问题

    目录 formdata传值给后台时参数为空 使用formData时候传递参数是个空值的情况 formData用途 使用formData 具体表单的操作API formdata传值给后台时参数为空 在vue里面使用formData的时候参数值为空,是因为axios是进行了二次封装,所以传递表达的时候会传递一个空表单过去 axios在进行二次封装的时候回影响到原来的表单提交或者文件上传, 所以可以用原生的发请求 // list 是一个对象数组 export const orinCatelogue =

  • Vue中Axios从远程/后台读取数据

    Vue中Axios从远程/后台读取数据

    Axios从远程读取数据 学习Axios的知识,并把数据从远端读取到页面上.后端数据,只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的.我们现在只做前端,数据大家只要会调用即可. 安装Axios 我们直接使用npm install来进行安装. cnpm install axios –save 由于axios是需要打包到生产环境中的,所以我们使用–save来进行安装. 引入Axios(在哪个模块中使用就在哪个模块中引入) 我们在.vue页面引入Axios,

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

  • Vue实现让页面加载时请求后台接口数据

    目录 让页面加载时请求后台接口数据 Vue请求后台数据几种方式 1.vue-resource官方提供的vue的一个插件 2.axios的使用 3.fetch-jsonp不受跨域限制 让页面加载时请求后台接口数据 <template>   <div class="hello">     <div>       {{title}}     </div>     <hr>     <button @click="co

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • 浅谈Web页面向后台提交数据的方式和选择

    1.通过表单提交 这是HTML支持最传统的提交方法,需要创建表单,然后表单包含各种类型的表单元素,还要有一个提交按钮,通过提交按钮来提交到后台,这种方式提交后页面会刷新. 2.通过网页链接提交 可以在网页的链接附上需要提交的参数,当用户点击链接后,浏览器发起向链接的访问,从而也把链接附带的参数提交到后台,这种方式提交后页面也会刷新. 3.通过ajax提交 Javascript支持ajax方式创建HTTP请求,可以通过在HTML页面元素的事件处理函数中创建ajax请求,在url参数里携带所需提交的

  • vue与vue-i18n结合实现后台数据的多语言切换方法

    在XXX.js文件中定义函数: getUser(context,info){ context.$http.get(SERVER_URL+'/users',info).then(function(data){ let err =data.body.error; if(err===0){ let dataObj = data.body.userLists; //获取后台返回的数据 this.users = dataObj.items.map(function (e,i) { //遍历获取的数据,用t

随机推荐