每日思考(2020/02/23)

Posted ericzlin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每日思考(2020/02/23)相关的知识,希望对你有一定的参考价值。

题目概览

  • 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)

以上是关于每日思考(2020/02/23)的主要内容,如果未能解决你的问题,请参考以下文章

一个类型思考了 8 年,依旧是最好的! | 每日趣闻

每日思考(2019/12/9)

每日思考(2019/12/29)

源哥每日一题第十五弹 poj 1190 关于深搜减枝以及对于阅读代码的思考

markdown 每日片段

每日思考记录(11)