标签：整数 load etc shrink 概览 包括 服务 too 概念
使用HTML Form上传文件：name属性是与后端约定的文件上传字段
<form action="http://localhost:3001/api/tools/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="fileToUpload">
<button type="submit">Submit</button>
</form>Node.js + express + multer 实现后端文件接收处理
const express = require('express');
const router = express.Router();
const path = require('path')
const multer = require('multer') // 图片上传模块
var upload = multer({
dest: path.join(__dirname, '../public/upload/'),
})// 定义图片上传的临时目录
router.post('/tools/upload', authLogin, upload.single('fileToUpload'), (req, res, next) => {
let file = req.file
// 处理文件
});原理：就是把文件转化为字节流，然后利用http进行传输，后端接受后再把二进制转化为原先的文件格式。在HTML表单中，可以上传文件的唯一控件就是<input type="file">。当一个表单包含<input type="file">时，表单enctype必须指定为multipart/form-data（表明表单需要上传二进制数据），method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。multiple="multiple"说明可以同时上传多个文件。也可以使用文件编码传输，可以把图片转化成base64格式然后进行传输，到了服务器之后直接解码base64
基本概念：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
基础语法：包括设置在容器上的容器属性(6个)以及设置在项目上的项目属性(6个)
| 容器属性 | 用途 | 默认值 | 其他 |
|---|---|---|
| flex-direction | 设置主轴方向 | row | row-reverse 、column、 column-reverse |
| flex-wrap | 定义如何换行 | nowrap | wrap 、wrap-reverse |
| flew-flow | flew-direction\flew-wrap的简写 | row nowrap |
| justify-content | 设置主轴的对齐方式 | flex-start | flow-end、center、space-between、space-around |
| align-items | 设置交叉轴的对齐方式 | stretch | flow-start、flow-end、center、baseline |
| align-content | 设置多行主轴的对齐方式 | stretch | flow-start、flow-end、center、space-between、space-around |
| 项目属性 | 用途 | 默认值 | 其他 |
|---|---|---|
| flow-grow | 设置放大比例 | 0 | number |
| flow-shrink | 设置缩小比例 | 1 | number |
| flow-basis | 设置初始大小 | auto | length |
| flow | flow-grow \flow-shrink\flow-basis的简写 | 0 1 auto |
| align-self | 设置对齐方式 | auto | flex-start、flex-end、center、baseline、stretch |
| order | 设置排序位置 | 0 | integer（整数） |
理解
简单实用
<div class="box">
<div></div>
<div></div>
<div></div>
</div>.box{
width: 1000px;
height: 300px;
margin: 0 auto;
display: flex;/* 用在父元素上，弹性布局 */
flex-direction: row;/* 默认row，垂直用column */
}
.box div {
background: rgb(218, 189, 189);
margin: 1px;
flex: 1;/* 三个盒子三等分 */
min-width:100px;
max-height: 500px;/* 可用于限制小盒子的宽度和高度范围 */
}
.box div:last-child {
flex: 2;/*分成四份，最后一个盒子2份，剩下两个盒子平均剩下两份 */
}justify-content属性是用来定义项目在主轴上如何对齐,具体对齐方式与轴的方向有关，所以要注意flex-direction定义的主轴方向
align-items属性是用来定义项目在交叉轴上如何对齐,具体的对齐方式与交叉轴的方向有关，所以要注意flex-direction定义的主轴方向
要理解flow-grow flow-shrink：flow-grow:用来定义有多余空间时，项目是否放大；flow-shrink用来定义空间不足时，项目是否缩小
flex-basis指的是flex items在被放进一个flex容器之前的大小
flex-basis属性定义的是在分配多余空间之前，项目占据的主轴空间
flow-shrink不可为负值，order可为负值
order数值越小，排列越靠前
align-self为auto时继承父元素的align-items，若无父元素，则等同于stretch
flex属性的快捷值(flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选)
flex:auto (=>1 1 auto)
flex:none (=>0 0 auto)
flex:1 (=>1 1 0%) flex:2(=>2 1 0%) flex:2 3(=>2 3 0%)
flex:50% (=>1 1 50%)相关完整教程：Flex 布局语法教程
var a = "aaaa"
var b = "bbbbb"
// 方法一： “+”
var c = a + b
console.log("c:", c)
// 方法二： “join("")”
var d = []
d.push(a,b)
console.log("d:", d.join(""))
// 方法三：模版字符串 `${}`
var e = `${a}${b}`
console.log("e:", e)标签：整数 load etc shrink 概览 包括 服务 too 概念
原文地址：https://www.cnblogs.com/EricZLin/p/12355124.html
