木灵鱼儿
阅读:1721
koa框架18 FormData
FormData是一种容器,用于模拟表单,向服务器发送数据,简单点来讲,他就是一个对象,键值对形式的对象。
创建方式
- new出一个FormData对象,然后手动传入参数
- 直接使用一个from元素转成FormData对象
使用方式
原生ajax配合使用
let form = new FormData();
form.append("name","mulingyuer");
form.append("pass","123456");
let xhr = new XMLHTTPRequest();
xhr.open("post","/a",true);
xhr.send(form);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
alert(xhr.responseText);
}else {
alert("失败");
}
}
}
前端js创建FormData对象,并且使用append方式,传入键值对数据,然后通过原生的ajax对象,发起post请求。
后端的话,我们直接读取ctx.request.fields就可以获取到提交过来的数据了。
router.post("/a",async ctx=>{
console.log(ctx.request.fields);
ctx.body = "上传成功"
});
此时后端输出如下数据
{ name: 'mulingyer', pass: '123456' }
注意一点,我们需要使用koa-better-body
fetch方式
let form = new FormData();
form.append("name","mulingyuer");
form.append("pass","123456");
(async () => {
let res = await fetch("/a", {
method: "post",
body: form
})
let text = await res.text();
console.log(text);
})()
由于fetch的方式,我们需要对返回的对象进行数据转换,由于后端返回的是文本,所以要使用text方式,如果是json,则使用json
然后再输出。
后端不用改变。
jq的ajax
let form = new FormData();
form.append("name","mulingyuer");
form.append("pass","123456");
(async () => {
let data = await $.ajax({
url: '/a',
type: 'post',
data: form,
//禁止处理数据(默认按照json)
processData: false,
//禁止定义头(urlencoded)
contentType: false
});
alert(data);
})();
jq的话也是利用async转换,然后由于jq默认会有对上传的数据修改(转换格式),所有要禁止他的修改,上传没有改动的FormData对象。
from元素转换
其实很简单,我们只需要js获取表单form的dom,在new出FormData对象是,作为参数传入,此时这个form元素就会自动转换。
<form id="form1">
用户名:<input type="text" name="name" /><br/> 密码:
<input type="password" name="pass" /><br/> 头像:
<input type="file" name="f1" multiple /><br/>
<input type="button" value="提交" id="btn1" />
</form>
let oBtn = document.getElementById('btn1');
oBtn.onclick = async function() {
let form=new FormData(document.getElementById('form1'));
let res = await fetch("/a", {
method: "post",
body: form
});
let text = await res.text();
console.log(text);
}
文件上传
文件的话,直接使用form元素转的话就不用考虑那么多了,直接和上面一样写法,如何是自己手动创建FormData对象,我们需要考虑到多文件的情况。
let oBtn = document.getElementById('btn1');
oBtn.onclick = async function() {
//let form=new FormData(document.getElementById('form1'));
let form = new FormData();
form.append('name', document.getElementsByName('name')[0].value);
form.append('pass', document.getElementsByName('pass')[0].value);
//将
Array.from(document.getElementsByName('f1')[0].files).forEach(file => {
form.append('f1', file);
});
let res = await fetch('/a', {
method: 'post',
body: form
});
let data = await res.text();
alert(data);
};
Array.from将文件dom转为数组,然后for循环,然后依次传入,最后上传。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
centos 安装最新版 node.js
[hide]先用yum 安装一次node先升级yum update 提示下载程序,回复y安装nodeyum install nodejsyum安装的node一般都不是最新的,所以我们还需要升级node的版本npm i n -g全局安装一个n插件n lts表示安装最新的稳定版!一些常用命令n ls查看已安装的node版本n rm 16.0.3删除16.0.3版本更多功能阅读插件文档:n等待安装完毕后,此时其实版本已经安装好了,但是输入node -v还是低版本,是因为centos的用户缓存问题。我们退出登录再登录就会刷新缓存了,此时的node -v输出的就是最新版本exit 退...
node npm yarn 如何同时运行多个指令
node的bash命令其实是有对应的指令字符的,但是,这个指令只能再linux,mac上才有生效,再windows是无效的,所以了解一下就行。命令说明&&顺序执行多条命令,当碰到执行出错的命令后将不执行后面的命令&并行执行多条命令||顺序执行多条命令,当碰到执行正确的命令后将不执行后面的命令|管道符windows上进行多命令"scripts": { "dev": "cross-env NODE_ENV=development webpack --env development --progress -...
koa教程2 HttpBearerAuth 传递token
前端发送token到后端,一般有三种方式:链接中携带token,query参数post这种请求body中携带token头信息携带token但是事实上http已经为我们提供了传token的方式,是一个相对来说比较安全的方式,就是HttpBearerAuth 其实他也是一个头信息来着,只是相对来说多了一点操作,在apipost软件中,我们可以直接可视化设置如果是axios,则是需要添加一个头信息:axios({ method: 'get', url: url, responseType: 'blob', headers: { 'Authoriz...

koa教程2 微信openid登录
微信的openid,前端登录时,会发送一个code码到后端,后端接收到这个code,然后配合appid、appsecret参数,像wx发送一个get请求。wx的请求地址:GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code具体查看文档:微信官方文档-服务端可以看到这段get请求有四个参数:属性类型默认值必填说明appidstring 是小程序 appIdsecretstring 是...
koa教程2 权限分级控制
在之前的代码中,我们使用了一个scope属性来表示用户的权限,但是scope是一个数字,他的阅读性是非常差的,当其他人开发的时候,可能并不知道你这个数字是什么意思?所以,我们需要将它转义成文本。为了方便判断,我们在enum.js中增加一个用户等级的对象enum.js://通用判断是否存在该类型 function isThisType(val) { let flag = false; Object.keys(this).find(key => { if (this[key] === val) { return flag = true; } })...
koa教程2 token鉴权
之前我们在token中传入我们的自定义参数,现在我们要做一个token鉴权,很简单,如果他的token合法,就可以访问这个路由,如果不合法,就打回。这个也不能说是真正意义上的鉴权,因为他还没有判断scope值,所以只能说是简单判断。做这个判断我们就可以通过中间件的形式,于是我们在middlewares目录下创建一个auth.js文件auth.js:const parseBearerToken = require("@utils/paresBearerToken"); const jwt = require("jsonwebtoken"); cons...
koa教程2 用户登录
登录类型用户注册之后,自然是用户登录,登录的时候我们需要考虑到登录的方式,往往在正式的项目里面,登录的方式可能会有很多种:账号密码登录手机号登录小程序一键登录那么我们登录的时候就要进行判断,设置一个type的属性,用于在登录时判断用户是什么类型的登录,这个由前端那边设定参数。type:1为账号密码登录,2为手机号登录,3为小程序一键登录作为判断,我们可以写一个查询表(枚举),在项目根目录创建一个lib目录,在里面创建一个enum.js文件。enum.js://通用判断是否存在该类型 function isThisType(val) { let flag = false; Obje...
node 自定义路径别名
用过vue cli的话,对路径中的@应该不陌生,他表示根目录,但是在node的环境里面,我们编写模块并引入时,并没有这种方便的写法。在node环境中,我们可以通过process.cwd()来表示根目录,但是这样的话,每次使用绝对路径引入,路径总是需要写一大堆拼接。const db = require(`${process.cwd()}/config/config`).database;这样略显麻烦,于是我们可以在全局写一个引入插件的方法:global.myRequire = function (path) { return require(`${process.cwd()}/${pa...
koa教程2 密码加密
默认情况下,我们通过User.create({ email, password, nickname });模型传入的数据,是无加密的,也就是说,在数据库中密码是明文显示的,这样肯定是不行,我们需要使用bcrypt插件进行加密yarn add bcryptjs --dev打开models/user.jsuser.js:const bcrypt = require("bcryptjs"); const { sequelize } = require(`${process.cwd()}/core/db`); const { Sequelize, Model, DataTy...

koa教程2 使用sequelize连接数据库,创建用户模型
数据库的连接处理,我们需要使用sequelize插件。这个插件还有对应的数据库驱动,如果是使用mysql,那么驱动是mysql2,具体可以查看中文版的入门教程:入门yarn add sequelize mysql2 --dev安装完成后我们先需要创建数据库连接。连接数据库在根目录/core目录**下创建一个db.js文件用于连接数据库。在连接数据库之前,我们需要一些数据库的参数,如账号,密码,端口,数据库名字,数据库地址,为了方便管理配置,我们在根目录创建一个config目录,里面存放一config.js文件 ,这个之前的教程我们就已经创建好了。config.js:module.expo...