每日思考（2020/02/23）

Posted 2021-03-08 ericzlin

题目概览

• Form表单是怎么上传文件的
• 对flex的了解
• 字符串相连有哪些方式

题目解答

Form表单是怎么上传文件的

• 使用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 容器（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-directionflew-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-shrinkflow-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)