精华内容
下载资源
问答
  • 主要介绍了Vue 使用formData方式向后台发送数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • FormData常用方法和在vue中的使用教程

    千次阅读 2020-12-17 10:24:13
    FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过前端Ajax 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会...

    一 : 简介

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

    FormData的主要用途有两个:

    1、将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
    2、异步上传文件

    二 : 如何使用

    (1) 通过FormData()构造函数来创建一个空的FormData对象
    //通过new 一个FormData()构造函数来创建一个空对象
    let formData = new FormData()
    
    (2) 常用方法
    • FormData.append()
      向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。
    formData.append("name", '小明');
    formData.append("meetingRoomId", this.form.meetingRoomId);
    
    • FormData.delete()
      从 FormData 对象里面删除一个键值对。
    formData.delete("name");
    formData.delete("meetingRoomId");
    
    • FormData.get()
      返回在 FormData 对象中与给定键关联的第一个值。
    formData.get('name')
    console.log(formData.get('name')); //'小明'
    
    • FormData.getAll();
      getAll()方法会返回该 FormData 对象指定 key 的所有值的数组。
    formData.append('username', 'Chris');
    formData.append('username', 'Bob');
    formData.getAll('username'); // ["Chris", "Bob"]
    
    • FormData.has()
      返回一个布尔值表明 FormData 对象是否包含某些键。
    formData.append('username', 'Chris');
    formData.has('username'); //  true
    
    • FormData.set()
      给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
    formData.set('username', 'Chris');
    //当第二个参数传递的是一个blob对象(Blob)或者file对象(File),
    //filename参数就代表传给服务端的文件名。
    formData.set('userpic', myFileInput.files[0], 'chris.jpg');
    

    三 : 在vue中使用FormData格式进行axios请求

    var formData = new FormData();
    formData.append("name", this.form.name);
    formData.append("meetingRoomId", this.form.meetingRoomId);
    formData.append("startTime", this.form.startTime);
    formData.append("endTime", this.form.endTime);
    formData.append("meetingTypeId", this.form.meetingTypeId);
    formData.append("applyAccountId", this.form.applyAccountId);
    formData.append("masterAccountId", this.form.masterAccountId);
    formData.append("attendAccountIds", this.form.attendAccountIds);
    formData.append("description", this.form.description);
    formData.append("status", this.form.status); 
    this.form.files.forEach(el => {
         formData.append("files", el); // 这里是支持多文件上传的,FormData对象可以支持同样的key值在对象中创建
      });
    this.$post2("base/meeting", formData).then(res => { //进行axios请求,在这里我封装的Content-Type: multipart/form-data;
    	console.log(res);
    })
    

    注 : 根据业务场景,文件是和参数一块上传到服务器的,没有进行分离,这里的文件File参数可以用原生input组件上传获取,也可以用自己的UI框架在Upload组件的beforeUpload(上传文件前的钩子)进行获取到File参数信息。(有问题欢迎评论私信)

    展开全文
  • FormData方式 做Vue项目的时候, 提交数据基本上都是用Axios, 之前做过的表单方面的提交,一直没有空隙进行总结,今天得空进行一下复习和总结:Vue中使用Axios处理包含上传文件的表单提交 可能出现的问题: 常见...

    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 对象中与给定键关联的第一个值。

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

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

    FormData.getAll(name)

    返回一个包含 FormData 对象中与给定键关联的所有值的数组。

    1. 如果在这个条目列表中没有名称为name的条目,则返回空列表
    2. 按顺序从这个条目列表中返回名称为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>
    
    展开全文
  • 主要为大家详细介绍了Vue formData实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • service.interceptors.request.use( config => { if (config.isFormData) { config.headers['Content-Type'] = 'application/x-... charset=UTF-8'; config.transformRequest = [ function(data) {
    service.interceptors.request.use(
        config => {
        	// 重要的 发送请求时isFormData: true
            if (config.isFormData) {
                config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
                config.transformRequest = [
                    function(data) {
                        let ret = '';
                        for (const it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
                        }
                        ret = ret.substring(0, ret.lastIndexOf('&'));
                        return ret;
                    }
                ];
            }
            
            if (!config.params) {
                config.params = {};
            }
            // 时间戳
            config.params['_'] = timetemp;
    
            return config;
        },
        error => {
            // do something with request error
            console.log(error); // for debug
            return Promise.reject(error);
        }
    );
    
    展开全文
  • VUE发送Formdata数据,NodeJS接收

    千次阅读 2019-04-29 17:22:14
    VUE发送Formdata数据 参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的。 具体使用方法,参考此链接地址 // 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop...

    VUE发送Formdata数据

    • 参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的。
    • 具体使用方法,参考此链接地址
    // 这里我使用的是cropperjs插件,裁剪图片成功执行此方法
     crop(blob) {
       const formData = new FormData();
       let uid = this.$store.getters.getUid;
       formData.append("croppedImg", blob);
       formData.append("id", uid);
       // 这里使用的是Axios请求
       this.$http
         .post("upload", formData)
         .then(res => {
           let data = res.data;
           if (data.code == 1) {
             let uploadAvatar = this.$store.getters.getUploadAvatar;
             this.$store.dispatch("onSaveUploadAvatar", uploadAvatar + 1);
             this.$Modal.success({
               title: "提示",
               content: data.msg
             });
           } else {
             this.$Modal.warning({
               title: "提示",
               content: data.msg
             });
           }
         })
         .catch(error => {
           console.log(error);
         });
     }
    
    • 前端请求请求后,我们在浏览器的Network看是否有参数。
    • 确保Network里有Form Data参数 ,如果是Query String Parameters参数或其它,则有可能不成功。
      Network图片描述

    NodeJS后台接收

    // 这里我配置了router,直接用app.post没有影响
    router.post("/upload", (req, res) => {
      let obj = {};
      // 接收参数
      let form = new multiparty.Form();
      // 设置文件存储路径
      form.uploadDir = "./avatar";
      // 设置单文件大小设置
      form.maxFilesSize = 2 * 1024 * 1024;
      // 上传完后处理
      form.parse(req, function (err, fields, files) {
        console.log(fields);
        console.log(files);
      }
     }
    

    提示:

    • 如果后台使用connect-multiparty模块只能接收jQuery传递的formdata参数,当然jQuery要设置了属性:
      • processData: false。// 不处理数据
      • contentType: false。// 不设置内容类型
      • 参考地址
    • 不能接收Axios传递的参数,因此推荐使用multiparty模块。
      NodeJS后台打印值
    展开全文
  • 使用 vue + element + FormData 来实现上传

    万次阅读 2019-03-09 02:16:41
    前端我是用的是 vue作为js框架 element - ui做UI 后端是使用的FormData来接收的 这是前端 &lt;el-upload action="auto" :http-request="uploadSectionFile" ...
  • let formData = new FormData(); this.form.pic_file.forEach((item) => { formData.append("pic_file", item); }); formData.append("filePurpose", this.form.filePur); formData.append("remark", this....
  • 将本地数据(.xlsx、.docx等文件)上传或导入数据库,有时候需要使用FormData 对象。FormData对象,可以把所有...2、vue中的创建 let formData = new window.FormData(); 3、在表单的基础上创建 <form id="f
  • vue Formdata

    千次阅读 2019-05-27 11:47:12
    转载自:https://www.cnblogs.com/yesyes/p/7299500.html
  • vue中配置请求参数FormData格式

    千次阅读 2020-12-06 23:11:17
    有时候需要给后端传递的参数是FormData(表单)格式(默认是json格式) // 在main.js中配置如下代码 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' axios.defaults....
  • FormData接口提供了一种表示表单数据的键值对 name/value 的构造方式,能够将数据通过前端 Ajax 请求发送给后端。 FormData的主要用途有两个: 异步上传文件。 实现form表单数据的序列化,将数据以键值对 name/...
  • 主要介绍了vue使用axios上传文件(FormData)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue使用formData类型上传文件

    千次阅读 2021-09-01 09:43:11
    vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作。 其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。 1.如图片上传,后端需要前端传formData类型数据的...
  • vue上传图片formdata

    千次阅读 2020-09-25 11:19:09
    diy ... import lrz from 'lrz'; export const upImage = ... const { formData } = await lrz(file); return http.post('/common/uploadali', formData, { headers: { 'Content-Type': 'multipart/form-data' } });.
  • [Vue]使用FormData 上传base64图片

    千次阅读 2019-07-16 17:40:51
    // var formData = new FormData(); // formData.append('brand',app.brand); // formData.append('icon', app.icon); // console.log(formData); app.icon = app.icon.replace(/\r|\n/g, '').replace('data...
  • 嵌套对象的校验项目中使用的vue+elementUI进行开发,已经用了有一段时间了,感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下,先通过前端校验,校验不通过不发送请求,直到满足...
  • Vue Post请求FormData传参

    千次阅读 2021-01-13 16:46:04
    Vue Post请求FormData传参'Content-Type':application/x-www-form-urlencoded;设置请求头把传入的参数转化成正常的参数而不是键值对'Content-Type': 'multipart/form-data'设置请求头请求处理 ‘Content-Type’:...
  • vue axios传递FormData填坑,headers不显示,后台报错等等问题 首先,查看你的axios全局配置中是否有配置以下代码 //整理数据 // 只适用于 POST,PUT,PATCH,transformRequest` 允许在向服务器发送前,修改请求数据 ...
  • vue图片上传formdata

    2021-01-13 16:58:48
    } if (isBMG && isLt2M) { this.params = new FormData() this.params.append('image', file, file.name) } return false }, } ajax请求: save() { const params = { name: this.form.name, job: this.form.job, ...
  • 本篇文章主要介绍了vuejs使用FormData实现ajax上传图片文件,具有一定的参考价值,有兴趣的可以了解一下
  • vue 文件上传方法formData

    千次阅读 2020-10-13 17:31:26
    html: 将文件拖到此处,或点击上传 只能上传xls文件,请下载模板填写 导入 formData方法 // 导入客户接口 uploadCust() { this.loading = true const formData = new FormData() formData.append('upload', this....
  • vue使用formData进行文件上传

    千次阅读 2019-05-10 20:38:00
    本文为博主原创,未经允许不得...1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux-form-item label="证书名称"> <ux-field-decorator name="authorizationDomain"> <ux-i...
  • 因为本次图片要求比较完整,所以直接传原图给后台,根据返回路径进行展示,利用的 ...let formData = new FormData() // 创建form对象 formData.append('file', file); this.oldFile = file sel...
  • 使用qs.stringify把json转换为form data格式 接口文件 import qs from 'qs'//引入qs export function getData(data = {}) { data = qs.stringify(data) return request({ url: '/xxx/xxx/xxx?...}

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,663
精华内容 5,065
关键字:

formdatavue

vue 订阅