这个独立封装的需求来自一个朋友公司，他说需要写一个带进度条动画的批量上传文件的组件，结果他们后端跟他说不能多文件上传，我一听就很尴尬了，怎么可能不能多文件呢哈哈，后来我只是告诉他进度条的实现方式，在过了2天后我一直对此事耿耿于怀，所以干脆自己动手用node写了一个多文件上传的demo，并记录下来。
- 前端: http请求为自己封装的一个原生请求函数，一切以原生代码为主；
- 后端(nodeJs): express + multer，自定义 multer 包的 diskStorage 函数;
直接上demo吧，我加上一点注解就好，就不用详细说明了, 其中写了一个测试接口用来测试，可以不用管；
// 前端 upload.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件demo</title>
<style media="screen">
.progress{
width: 50%;
height: 5px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 10px;
position: relative;
}
.progress>span{
display: inline-block;
position: absolute;
border-radius: 4px;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: rgb(98, 230, 74);
transition: width 0.3s ease-out;
}
</style>
</head>
<body>
<input id="file" type="file" multiple>
<div class="progress">
<span></span>
</div>
<script type="text/javascript">
var http = function (option) {
最低0.47元/天 解锁文章
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
