JS日期格式化自动补0的小技巧

们在处理日期展示的时候经常需要将时间戳转换为格式化的日期，比较省力的方法是直接使用日期格式化的NPM包，比如：moment.js。但是有时候你不想因为这个小需求引入一个包，或者你想用原生JavaScript实现格式化。

可能的实现是这样的：

const date=new Date();
const year=date.getFullYear();
const month=date.getMonth() + 1;
const day=date.getDate();
const hour=date.getHours();
const min=date.getMinutes();
const ss=date.getSeconds();
console.log(`${year}-${month}-${day} ${hour}:${min}:${ss}`);
// 2021-8-1 10:31:45

但是这样还不符合格式，因为月份，日期，小时，分，秒有可能是一位数字，需要在数字前补0。所以上面的代码还需要修改一下：

const padZero=function(num){ return num < 10 ? `0${num}` : num;}
const date=new Date();
const year=date.getFullYear();
const month=date.getMonth() + 1;
const day=date.getDate();
const hour=date.getHours();
const min=date.getMinutes();
const ss=date.getSeconds();
console.log(`${year}-${padZero(month)}-${padZero(day)} ${padZero(hour)}:${padZero(min)}:${padZero(ss)}`); 
// 2021-08-01 10:38:26

我们实现了一个工具数字大小自动补零的方法，除了上面的方法还有别的方式吗？JavaScript作为一个非常灵活的语言，一定有其他的实现方式。今天就看到一个巧妙的解决办法。

const date=new Date();
const year=date.getFullYear();
const month='0' + (date.getMonth() + 1);
const day='0' + date.getDate();
const hour='0' + date.getHours();
const min='0' + date.getMinutes();
const ss='0' + date.getSeconds();
console.log(`${year}-${month.slice(-2)}-${day.slice(-2)} ${hour.slice(-2)}:${min.slice(-2)}:${ss.slice(-2)}`); 
// 2021-08-01 13:43:29

先通过统一添加前缀字符"0"，然后再统一截取后两位字符。这样做确实很聪明，很好地达到了格式化的目的。

语言没有高低之分，水平在乎自己。

欢迎大家点赞，评论，收藏，转发。

itten Code作为一款优秀的GPT驱动代码生成与完成工具，支持多样化的编程语言，如Python、JavaScript、TypeScript及Java等。其主要特性在于能够自动添加缺失的代码部分，有效缩短开发人员的工作时间。同时，该工具能够实现代码间语义级别的翻译，提供跨编程语言的互译服务。Fitten Code亦可根据代码内容自动生成注释，提供明确的说明及文档。另外，其整合了智能bug查找、代码解析、自动生成单元测试及根据代码自动生成测试用例等强大功能。

立即访问Fitten Code官方网站开启使用之旅

https://code.fittentech.com/

哪些人群可能从Fitten Code中获得益处？

Fitten Code立足于那些致力于提升编程效率，降低失误率以及快速生成代码片段的程序员用户群体。无论是快速构建项目框架、规划函数结构还是进行接口调用，Fitten Code均能提供有效助力。

Fitten Code的应用场景

Python项目：运用Fitten Code实现自动化代码生成操作。

JavaScript项目：借助Fitten Code实现代码自动补全。

Java项目：采用Fitten Code实现智能bug精确查找。

Fitten Code的产品优势

代码自动补全：显著提升开发人员编码效率，提高工作速度。

注释生成代码：针对代码内容自动生成精准、详实的注释。

智能bug查找：快速找准 bug 问题所在，提供改进策略以缩短调试时间。

代码解析：对于晦涩难懂的代码区域提供易于理解的说明，协助理解及维护。

自动生成单元测试：保障代码质量，增强软件的稳定性。

根据代码自动生成测试用例：简化测试流程，保证代码性能稳定。

如何运用Fitten Code

若您想尝试使用Fitten Code，只需访问其官方网站，依照项目需求选取对应的编程语言即可。输入您的代码后，Fitten Code将自动生成完整或注释类代码，并借助智能bug查找功能助您迅速发现问题并给出解决办法。为了更加深入理解并充分发挥Fitten Code的功能，敬请访问官方网站获取更多详细资讯。

在前面

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点，break or continue ?

文件上传原理
最原始的文件上传
使用 koa2 作为服务端写一个文件上传接口
单文件上传和上传进度
多文件上传和上传进度
拖拽上传
剪贴板上传
大文件上传之分片上传
大文件上传之断点续传
node 端文件上传

原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体

请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。

消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。

不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。

至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。

DEMO

这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
            标题：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中，文件上传本身和业务无关，代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息，再做二次处理。

ctx.request.files.f1 得到文件信息，f1为input file 标签的 name
获得文件的扩展名，重命名文件

NODE

/**
 * 服务入口
 */
var http=require('http');
var koaStatic=require('koa-static');
var path=require('path');
var koaBody=require('koa-body');//文件保存库
var fs=require('fs');
var Koa=require('koa2');

var app=new Koa();
var port=process.env.PORT || '8100';

var uploadHost=`http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传，默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理，修改名称
app.use((ctx)=> {
    var file=ctx.request.files.f1;//得道文件对象
    var path=file.path;
    var fname=file.name;//原文件名称
    var nextPath=path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr=fname.split('.');
        var ext=extArr[extArr.length-1];
        var nextPath=path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body=`{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server=http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/

在线咨询

上一篇：关于乱码问题的解决与HttpServletRespo
下一篇：0基础吉他萌新挑战：一星期入门—识谱、调音、姿势、A

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。