react + node 实现文件上传
node 端接收并转存文件
1 | static updateUserAvatar = async (ctx: any) => { |
前端有两种方案
- 用 form 表单
form 上传 利用 form 表单的 enctype 属性可以把表单提交的对象设置为多媒体资源,然后通过 inuput:file 就可以实现文件上传的功能
这个方法相对便捷有效而且还不用考虑跨域的问题,毕竟我们上传的文件终究还是要访问 API 接口;不过这种方法还有一个不方便的地方,就是 form 表单会默认跳转也就是会在浏览器访问你所提交文件的那个接口,这个行为处理起来很麻烦。
1 | <form action="http://localhost:8088/api/user/updateUserAvatar" method="post" encType="multipart/form-data"> |
- 用 xhr 自己发送
自己发送时会遇到跨域问题,后端解决
1 | <div> |
node 端的跨域处理
- koa2-cors
1 | npm install koa2-cors --save |
- 自己写一个中间件
1 | app.use(async (ctx: any, next: any) => { |
关于登录鉴权
如果两种场景都有,怎么封装组件
大文件上传
断点续传
h h h h h h h h h h h
gy