返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目中form data形式传参方式
  • 827
分享到

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

2024-04-02 19:04:59 827人浏览 薄情痞子
摘要

目录Vue中fORM data形式传参vue文件提交 FormData方式前驱知识FormDateFormData的使用URL实操vue中form data形式传参 vue项目中fo

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>

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

--结束END--

本文标题: vue项目中form data形式传参方式

本文链接: https://lsjlt.com/news/150410.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue项目中form data形式传参方式
    目录vue中form data形式传参vue文件提交 FormData方式前驱知识FormDateFormData的使用URL实操vue中form data形式传参 vue项目中fo...
    99+
    2024-04-02
  • python使用form-data形式上传文件请求的方法
    虽然现在基本上都约定俗成的接口都用json形式请求 但是不可避免地 有些接口需要传文件流,此时就需要用form-data形式上传了 for.e: 存在以下接口,通过接口创建海报图 但...
    99+
    2023-05-18
    form-data上传文件请求form-data上传文件 formdata上传图片
  • Servlet如何获取AJAX POST请求中参数以form data和request payload形式传输
    这篇文章主要介绍Servlet如何获取AJAX POST请求中参数以form data和request payload形式传输,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!本文实例讲述了Servlet获取AJAX P...
    99+
    2023-05-30
    servlet ajax post
  • python怎么使用form-data形式上传文件请求
    虽然现在基本上都约定俗成的接口都用json形式请求但是不可避免地 有些接口需要传文件流,此时就需要用form-data形式上传了for.e:存在以下接口,通过接口创建海报图 但需要上传缩略图,此时接口的Content-Type就不能是app...
    99+
    2023-05-15
    Python form-data
  • python如何使用form-data形式上传文件请求
    本篇内容介绍了“python如何使用form-data形式上传文件请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!虽然现在基本上都约定俗成...
    99+
    2023-07-06
  • ajax中data传参的方式有哪些
    这篇文章主要介绍ajax中data传参的方式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:1. POST方式: function orderCancel(o...
    99+
    2024-04-02
  • Java实现以form-data形式文件上传到服务器
    Java实现以form-data形式文件上传到服务器 package com.joolun.cloud.mall.common.util;import com.alibaba.fastjson.JSO...
    99+
    2023-08-31
    java 服务器 apache
  • Vue中mapMutations传递参数方式
    目录通过子组件定义的方法传递参数在…mapMutations引用当然也可以写直接传递关于mapMutations的作用通过子组件定义的方法传递参数 在…m...
    99+
    2024-04-02
  • 【使用multipart/form-data方式传递MultipartFile参数,实现服务间文件的传递】
    目录 一、代码实现二、MultipartFile工具类三、HttpClient使用四、参考链接 一、代码实现 1、A服务接收前端上传文件并发送至B服务 引入依赖 org.apa...
    99+
    2023-09-06
    前端 java
  • vue中项目如何提交form格式数据的表单
    目录vue提交form格式数据的表单先将数据处理数据上传封装文件vue form表单最简写法vue提交form格式数据的表单 先将数据处理 let formData = new Fo...
    99+
    2024-04-02
  • Spring Data JPA中 in 条件参数的传递方式
    关于Spring Data JPA中自定义sql 条件的 in参数记录 此文做一个记录,以便以后观看,也希望正在遇到同样问题的同学能有所启发,如果你有更好的方法,或我的做法有问题,请...
    99+
    2024-04-02
  • vue项目中引入js-base64方式
    目录vue引入js-base641.安装md5依赖2.在需要使用md5的组件中使用直接使用md5使用Base64编码解码1.下载包2.在你需要解码(编码)的文件中引用3.使用方法vu...
    99+
    2024-04-02
  • Linux中如何以form表单形式上传文件
    这篇文章给大家分享的是有关Linux中如何以form表单形式上传文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。先cd到要上传文件的目录下:root@iZ2zee1przeygbuu4rkwvxZ:/usr/l...
    99+
    2023-06-12
  • vue项目base64转img方式
    目录base64转img方式效果展示base64和jpg/png互转base64的转换base64转img方式 输入框:       <el-input         cla...
    99+
    2024-04-02
  • Golang形参要求指南:参数传递方式、传值与传址
    Golang形参要求指南:参数传递方式、传值与传址 在学习Golang编程语言过程中,了解参数传递的方式以及传值和传址的概念是非常重要的。本文将深入探讨Golang中的形参要求,包括参...
    99+
    2024-03-02
    golang 参数传递 形参要求
  • Vue中mapMutations传递参数方式是什么
    本篇内容主要讲解“Vue中mapMutations传递参数方式是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中mapMutations传递参数方式是什么”吧!通过子组件定义的方法传递...
    99+
    2023-06-30
  • vue-router传参的方式有哪些
    这篇文章将为大家详细讲解有关vue-router传参的方式有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Vue Router 是 Vue.js 官方的...
    99+
    2024-04-02
  • vue路由传参方式有哪些
    在vue中实现路由传参的方式有:1.通过$router.push携带参数传参;2.通过params传递实现传参;3.通过query传递实现传参;在vue中实现路由传参的方式有有以下几种通过$router.push携带参数实现路由传参getD...
    99+
    2024-04-02
  • vue中使用mixins/extends传入参数的方式
    目录使用mixins/extends传入参数vue mixins的原理使用mixins/extends传入参数 最近做报表页面,基本都是列表页面,所以想用mixins。 但是接口的u...
    99+
    2024-04-02
  • Vue中常见的几种传参方式小结
    目录前言父子组件之间传参兄弟组件之间传参provide/inject传参总结前言 Vue组件传参方也是面试最常考的内容,犹记得当初刚出来实习的时候,遇到一个需求,大概就是一个tabs...
    99+
    2023-05-19
    vue传参方式有哪些 vue传参方法 vue传参
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作