React+Koa实现文件上传的示例
背景
最近在写毕设的时候，涉及到了一些文件上传的功能，其中包括了普通文件上传，大文件上传，断点续传等等
服务端依赖
- koa(node.js框架)
- koa-router(koa路由)
- koa-body(koa body 解析中间件，可以用于解析post请求内容)
- koa-static-cache(koa 静态资源中间件，用于处理静态资源请求)
- koa-bodyparser(解析 request.body 的内容)
后端配置跨域
后端配置静态资源访问 使用 koa-static-cache
后端配置requst body parse 使用 koa-bodyparser
前端依赖
- react
- antd
- axios
正常文件上传
后端
后端只需要使用 koa-body 配置好options，作为中间件，传入router.post('url',middleware,callback)即可
后端代码
前端
我这里使用的是formdata传递的方式，前端通过<input type='file'/> 来访问文件选择器，通过onchange事件 e.target.files[0] 即可获取选择的文件，而后创建formdata 对象将获取的文件formdata.append('file',targetfile)即可
前端代码
其他可选方法
- input+form 设置form的aciton为后端页面，enctype="multipart/form-data"，type=‘post'
- 使用filereader读取文件数据进行上传 兼容性不是特别好
大文件上传
文件上传的时候，可能会因为文件过大，导致请求超时，这时候就可以采取分片的方式,简单来说就是将文件拆分为一个个小块，传给服务器，这些小块标识了自己属于哪一个文件的哪一个位置，在所有小块传递完毕后，后端执行merge 将这些文件合并了完整文件，完成整个传输过程
前端
- 获取文件和前面一样，不再赘述
- 设置默认分片大小，文件切片，每一片名字为 filename.index.ext，递归请求直到整个文件发送完请求合并
后端
后端需要提供两个接口
上传
将上传的每一个分块存储到对应name 的文件夹，便于之后合并
合并
根据前端传来合并请求，携带的name去临时缓存大文件分块的文件夹找到属于该name的文件夹，根据index顺序读取chunks后，合并文件fse.appendfilesync(path,data) (按顺序追加写即合并),然后删除临时存储的文件夹释放内存空间
断点续传
大文件在传输过程中，如果刷新页面或者临时的失败导致传输失败，又需要从头传输对于用户的体验是很不好的。因此就需要在传输失败的位置，做好标记，下一次直接在这里进行传输即可，我采取的是在localstorage读写的方式
文件相同判断
通过计算文件md5,hash等方式均可，当文件过大时，进行hash可能会花费较大的时间。 可取文件的一块chunk与文件的大小进行hash,进行局部的采样比对， 这里展示 通过 crypto-js库进行计算md5，filereader读取文件的代码
总结
之前一直对于上传文件没有过太多的了解，通过毕设的这个功能，对于上传文件的前后端代码有了初步的认识，可能这些方法也只是其中的选项并不包括所有，希望未来的学习中能够不断的完善。
第一次在掘金写博客，在参加实习以后，发现自己的知识体量的不足，希望能够通过坚持写博客的方式，来梳理自己的知识体系，记录自己的学习历程，也希望各位大神在发现问题时不吝赐教，thx
以上就是react+koa实现文件上传的示例的详细内容，更多关于react+koa实现文件上传的资料请关注其它相关文章！