vue项目中form data形式传参方式

目录
  • vue中form data形式传参
  • vue文件提交 FormData方式
    • 前驱知识
      • FormDate
      • FormData的使用
      • URL
    • 实操

vue中form data形式传参

vue项目中form data形式传参,需要在headers中添加如下代码

 headers: {
             'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
         }

接口请求如下:

export function subFaq (params) {
    return request({
        url: `/jxxx/pub/iface/speech/`,
        method: 'PUT',
        data:qs.stringify(params),
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
         }
    })
}

如下图,在Form Data的中形式下,需要使用qs.stringify(params) ,params是一个对象

如下图,在Form Data的中形式下,直接传的是对象

vue文件提交 FormData方式

做Vue项目的时候, 提交数据基本上都是用Axios, 之前做过的表单方面的提交,一直没有空隙进行总结,今天得空进行一下复习和总结:Vue中使用Axios处理包含上传文件的表单提交

可能出现的问题:

常见的问题
1、上传文件应该以什么方式提交, 比如后台是multipart/form-data, 而习惯性以json对象发送数据(实际上大量插件对数据对象也封装了方法, 所以容易忽略)
2、上传文件提交的格式, 以为将对象改成数组就太天真了
3、语法错误. 比如:>> :on-change=“自定义事件名” 写成>> @on-change=""

前驱知识

FormDate

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。

每个FormData对象都有一个相关的entry。它最初是一个空列表。entry 由name和value组成。

英文文献:https://xhr.spec.whatwg.org/#interface-formdata

FormData()使用的时候要创建一个新的 FormData 对象。

let FormData = new FormData();

方法

FormData.append(name, value)`

向 FormData 对象中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。

append(name, value) 和 append(name, blobValue, filename)

请注意参数name、value和blobValue存在的原因是由于用于编写的编辑软件的限制XMLHttpRequest标准。

FormData.delete(name)
  • delete (name)方法步骤是从这个条目列表中删除名称为name的所有条目。
  • FormData.entries()返回一个包含所有键值对的iterator对象。
  • FormData.get(name)返回在 FormData 对象中与给定键关联的第一个值。

如果在这个条目列表中没有名称为name的条目,则返回null。

返回此条目列表中名称为name的第一个条目的值。

  • FormData.getAll(name)返回一个包含 FormData 对象中与给定键关联的所有值的数组。

如果在这个条目列表中没有名称为name的条目,则返回空列表

按顺序从这个条目列表中返回名称为name的所有条目的值

  • FormData.has(name)返回一个布尔值表明 FormData 对象是否包含某些键。

如果在条目列表中有一个名为name的条目,则has (name)方法步骤将返回true;否则false。

  • FormData.keys()返回一个包含所有键的iterator对象。
  • FormData.set(name, value)给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。

set (name, value)和set (name, blobValue, filename)方法步骤如下:

1.给予的value要有value值;否则blobValue。

2.如果使用name、blobValue和filename,则将entry设为创建条目的结果。

3.如果在这个条目列表中有名称为name的条目,那么用entry替换第一个这样的条目,并删除其他条目

4.否则,将条目添加到this的条目列表中。

  • FormData.values()返回一个包含所有值的iterator对象。

FormData的使用

axios 传参时要注意的

//重点在*
//重点在*
//重点在*
//重点在*
let file = new FormData();//*
  for(let key in data){//*
    file.append(key,data[key]);//*
  };
 axios({
    method:"post",
    url:baseUrl +"/api/cateadd",
    data:file,//*
  }).then(res=>{
     //请求成功返回的数据在这进行操作

 }).catch(err=>{
    //请求失败返回的数据在这 

 });

URL

URL.createObjectURL(file)

通过URL.createObjectURL(file)可以获取当前文件的一个内存URL,

createObjectURL是同步执行的

createObjectURL返回一段带hash的url,并且一直存储在内存中,直到document触发了unload事件(例如:document close)或者执行revokeObjectURL来释放。

实操

下面使用两种方式进行讲解文件如何提交:

1.使用element-ui

使用element-ui的方便之处就是不用再费劲自己写css样式,有包装好的组件直接引入即可,在这不讲怎么使用element-UI的使用,感兴趣的自己进官网进行查看(官网:https://element.faas.ele.me/#/zh-CN

使用 element-ui 中的 Upload 组件,

代码引入以后查看upload组件对应的方法属性,里面有两个方法:on-success和on-change两个钩子函数,

钩子函数 说明 类型
on-success 文件上传成功时的钩子 function(response, file, fileList)response是服务器返回的响应file一个文件fileList存放多个文件的数组
on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 function(file, fileList)file一个文件fileList存放多个文件的数组

element-UI将返回的file对象封装了一下, 首先我们要拿到真正的文件对象, 使用的时候一定要在提交数据之前看看数据到底在哪里:

  • 真正的File对象是fileList数组中某个元素的raw属性!
  • 真正的File对象是fileList数组中某个元素的raw属性!
  • 真正的File对象是fileList数组中某个元素的raw属性!
  • 真正的File对象是fileList数组中某个元素的raw属性!

重要的事多说几遍!!!!

在这我选择使用on-change,因为element-UI中提供了一个http-request事件来覆盖默认的action, 这样很好的避免了一些异常,on-success虽然通过了验证, 但是在生产环境中由于action地址空所以默认请求当前地址, 出现了404。

<template>
    <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :on-change="changeImg"// changeImg事件名是自定义的
        >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>
<script>
      //改变图片时,获取图片路径及信息,e 指的是提交上来的文件
        changeImg(e){
          // 1.处理文件大小
          if(e.size > 2*1024*1024){
            alert('文件大小不能超过2M')
            return
          }
          // 2.处理文件后缀
          var ext = ['.jpg','.png','.jpeg','.gif'];
          var extName = e.name.slice(e.name.lastIndexOf('.'));
          if(!ext.some(item=>item==extName)){
            alert('上传文件格式不正确')
            return
          }
          // 上传显示的文件
          // 将文件生成url地址,并显示在页面中
          this.imageUrl = URL.createObjectURL(e.raw)
          // 将文件存放到form.img中
          this.form.img = e.raw;//真正的File对象是fileList数组中某个元素的raw属性!
            
        },
</script>

2.使用原始的方法

自己写好样式:

<template>
    <!-- 自定义文件上传 -->
    <div class="img-box">
        <h3>+</h3>
        <img v-if="imageUrl" :src="imageUrl" alt="">
        <input type="file" @change="changeImg1">
    </div>
</template>
<script>
  changeImg1(e){
       // 取出上传的文件
      let file = e.target.files[0];
      // 1.确认文件大小
      if (file.size > 2 * 1024 * 1024) {
        warningAlert("文件大小不能大于2M");
        return;
      }
      // 2.确认文件格式
      let arr = [".jpg", ".jpng", ".png", ".jpeg"];
      let lastName = file.name.slice(file.name.lastIndexOf("."));
      if (!arr.some(item => item == lastName)) {
        warningAlert("文件格式错误");
        return;
      }
      // 3.获取文件的存储位置用于渲染页面
      this.imgUrl = URL.createObjectURL(file);
      // console.log(this.imgUrl);
      // 4.将文件赋值给要提交的变量
      this.form.img = file;
    },
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue使用formData格式类型上传文件的示例

    在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作. 其中,文件上传算是比较难的一种.这篇文章五分钟教会你上传文件. 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" @click="uploadFile2()">点击上传</el-button> <input type="file" @change=&quo

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

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

  • 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方法,传入请求

  • 基于form-data请求格式详解

    最近一直都比较忙,坚持月月更新博客的计划不得中止了,今天抽出点时间来说说最近项目中遇到的一个问题,有关request post请求格式中的multipart/form-data格式. 引言 最近在参与一个项目过程中遇到一个问题,相信大部分人都遇到过: 在后端与前端约定好application/json格式传递数据时,因为后台是go强类型语言,在定义api接口时,某些字段要求是整型类型,但是对于前端来说输入框或者从url中的search取到的参数都是字符串,不得不进行前端类型转换. 咋一看,对于接

  • vue项目中form data形式传参方式

    目录 vue中form data形式传参 vue文件提交 FormData方式 前驱知识 FormDate FormData的使用 URL 实操 vue中form data形式传参 vue项目中form data形式传参,需要在headers中添加如下代码 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } 接口请求如下: export function subFaq (params) {

  • Vue + Axios 请求接口方法与传参方式详解

    目录 一.Get请求: 二.Post请求: 三.拓展补充 使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法. 一.Get请求: Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式: this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this

  • vue计算属性computed方法内传参方式

    目录 vue计算属性computed方法内传参 计算属性computed与method的区别 什么是计算属性? computed实例 computed与method的区别 关于传参问题 vue计算属性computed方法内传参 遇到头疼的vue计算属性传参问题 经过各种资料查找,亲测有效 index.vue <van-circle       v-model="Ratedata[index].currentRate"          color="#2462E8&qu

  • 详解vuex中mutation/action的传参方式

    前言 在vuex中提交 mutation 是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到 action 里面.对于mutation/action,有一个常见的操作就是传参,也就是官网上说的"提交载荷". 这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设置分割成不同模块的方法.其中,state模块中配置如下 //vuex中的state const state = { count: 0 } export default state; mutatio

  • vue项目中vant tab改变标签颜色方式

    目录 vant tab改变标签颜色 vant标签栏样式改变 问题描述 算法描述 vant tab改变标签颜色 找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e" // 选中的标签文字颜色 color="#144a9e" // 下面那个下划线颜色 @click="tabClick"> vant标签栏样式

  • Feign调用中的两种Header传参方式小结

    目录 Feign调用中的两种Header传参方式 在请求拦截器中统一配置 通过@RequestHeader注解 调用feign接口时,如何往header中添加参数 总结 Feign调用中的两种Header传参方式 在Spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端. 我们可以使用JDK原生的URLConnection.Apache的Http Client.Netty的异步HTTP Client, Spri

  • animate.css在vue项目中的使用教程

    在vue项目中使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库(详情可见vue官网-过渡:过渡),下面我们开始介绍在vue中单独使用animate动画,其实也非常简单,两步留可以实现: 第一步:安装: 在命令行中执行:npm install animate.css --save 第二步:引入及使用: main.js中: import animated from 'animate.css

  • Python函数定义及传参方式详解(4种)

    一.函数初识 1.定义:将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 2.好处:代码重用:保持一致性:可扩展性. 3.示例如下: # -*-coding:utf-8-*- def sayHello(): print('Hello world!') sayHello() 二.函数传参方式 如上面的实例是函数中最基础的一种,是不传参数的,说到这里,我们有必要了解一下何为函数参数: 1.函数参数: 形参变量: 只有在被调用时才分配内存单元,调用结束时,即刻释

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • vue项目中应用ueditor自定义上传按钮功能

    由于上传地址问题,需要自定义上传按钮,效果如图 由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,

随机推荐