美文网首页
FormData (form 表单数据提交 处理 生成文件接口u

FormData (form 表单数据提交 处理 生成文件接口u

作者: 说好的幸福2020 | 来源:发表于2019-06-17 11:31 被阅读0次

场景:比如现在有导出csv的url, 要求方式为get/post,后端是要求数据是form表单数据form-data的形式。
处理:
    1 ,直接用form表单提交
                设置好action,method即可,设置form提交content-type是multipart/form-data,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 的默认方式提交数据。
    2 , xmlHttpRequest方式处理(使用ajax)
            需要数据处理为FormData形式即可(https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
            以vue的项目为例,下文的someData为举例

           //生成formData类型数据
            const formDataTrans = new FormData();
            formDataTrans.append("name", someData.name);
            formDataTrans.append("age", someData.age);
            formDataTrans.append("sex", someData.targetDesc);

  (如果传递参数为formData形式,浏览器会忽略或者删除自定的Content-type,并添加Content-type:"multipart/form-data"

             ajax({
                url: "后端定义的接口,
                method:‘post',
                headers:{
                        "Content-type": "multipart/form-data"
                },
                data: formDataTransfer
            })

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

相关文章

网友评论

      本文标题:FormData (form 表单数据提交 处理 生成文件接口u

      本文链接:https://www.haomeiwen.com/subject/irgofctx.html