整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。
这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。
以下是本文所涉及到的知识点，break or continue ?
原理很简单，就是根据 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结尾。
每一个表单项又由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 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。
然后在后续中间件内得到已保存的文件的信息，再做二次处理。
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/
回车字符（Ctrl+M）让你紧张时，别担心。有几种简单的方法消除它们。
-- Sandra Henry-stocker（作者）
当回车字符（Ctrl+M）让你紧张时，别担心。有几种简单的方法消除它们。
“回车”字符可以往回追溯很长一段时间 —— 早在打字机上就有一个机械装置或杠杆将承载纸滚筒的机架移到右边，以便可以重新在左侧输入字母。他们在 Windows 上的文本文件上保留了它，但从未在 Linux 系统上使用过。当你尝试在 Linux 上处理在 Windows 上创建的文件时，这种不兼容性有时会导致问题，但这是一个非常容易解决的问题。
如果你使用 od（ 八进制转储(octal dump)）命令查看文件，那么回车（也用 Ctrl+M 代表）字符将显示为八进制的 15。字符 CRLF 通常用于表示 Windows 文本文件中的一行结束的回车符和换行符序列。那些注意看八进制转储的会看到 \r\n。相比之下，Linux 文本仅以换行符结束。
这有一个 od 输出的示例，高亮显示了行中的 CRLF 字符，以及它的八进制。
$ od -bc testfile.txt 0000000 124 150 151 163 040 151 163 040 141 040 164 145 163 164 040 146 T h i s i s a t e s t f 0000020 151 154 145 040 146 162 157 155 040 127 151 156 144 157 167 163 i l e f r o m W i n d o w s 0000040 056 015 012 111 164 047 163 040 144 151 146 146 145 162 145 156 <== . \r \n I t ' s d i f f e r e n <== 0000060 164 040 164 150 141 156 040 141 040 125 156 151 170 040 164 145 t t h a n a U n i x t e 0000100 170 164 040 146 151 154 145 015 012 167 157 165 154 144 040 142 <== x t f i l e \r \n w o u l d b <==
虽然这些字符不是大问题，但是当你想要以某种方式解析文本，并且不希望就它们是否存在进行编码时，这有时候会产生干扰。
幸运的是，有几种方法可以轻松删除回车符。这有三个选择：
你可能会在安装时遇到麻烦，但 dos2unix 可能是将 Windows 文本转换为 Unix/Linux 文本的最简单方法。一个命令带上一个参数就行了。不需要第二个文件名。该文件会被直接更改。
$ dos2unix testfile.txt dos2unix: converting file testfile.txt to Unix format...
你应该会发现文件长度减少，具体取决于它包含的行数。包含 100 行的文件可能会缩小 99 个字符，因为只有最后一行不会以 CRLF 字符结尾。
之前：
-rw-rw-r-- 1 shs shs 121 Sep 14 19:11 testfile.txt
之后：
-rw-rw-r-- 1 shs shs 118 Sep 14 19:12 testfile.txt
如果你需要转换大量文件，不用每次修复一个。相反，将它们全部放在一个目录中并运行如下命令：
$ find . -type f -exec dos2unix {} \;
在此命令中，我们使用 find 查找常规文件，然后运行 dos2unix 命令一次转换一个。命令中的 {} 将被替换为文件名。运行时，你应该处于包含文件的目录中。此命令可能会损坏其他类型的文件，例如除了文本文件外在上下文中包含八进制 15 的文件（如，镜像文件中的字节）。
你还可以使用流编辑器 sed 来删除回车符。但是，你必须提供第二个文件名。以下是例子：
$ sed -e “s/^M//” before.txt > after.txt
一件需要注意的重要的事情是，请不要输入你看到的字符。你必须按下 Ctrl+V 后跟 Ctrl+M 来输入 ^M。s 是替换命令。斜杠将我们要查找的文本（Ctrl + M）和要替换的文本（这里为空）分开。
你甚至可以使用 vi 删除回车符（Ctrl+M），但这里假设你没有打开数百个文件，或许也在做一些其他的修改。你可以键入 : 进入命令行，然后输入下面的字符串。与 sed 一样，命令中 ^M 需要通过 Ctrl+V 输入 ^，然后 Ctrl+M 插入 M。%s 是替换操作，斜杠再次将我们要删除的字符和我们想要替换它的文本（空）分开。 g（全局）意味在所有行上执行。
:%s/^M//g
dos2unix 命令可能是最容易记住的，也是从文本中删除回车的最可靠的方法。其他选择使用起来有点困难，但它们提供相同的基本功能。
via: https://www.networkworld.com/article/3438857/how-to-remove-carriage-returns-from-text-files-on-linux.html
作者： Sandra Henry-Stocker 选题： lujun9972 译者： geekpi 校对： wxy
本文由 LCTT 原创编译， Linux中国 荣誉推出
载链接：https://segmentfault.com/a/1190000020920000
在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。
核心 CSS 语句
优点
短板
适用场景
Demo
<style>
.demo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div class="demo">这是一段很长的文本</div>
</body>示例图片
核心 CSS 语句
优点
短板
适用场景
Demo
<style>
.demo {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>示例图片
优点
短板
适用场景
Demo
当前仅适用于文本为中文，若文本中有英文，可自行修改
<script type="text/javascript">
const text = '这是一段很长的文本';
const totalTextLen = text.length;
const formatStr = () => {
const ele = document.getElementsByClassName('demo')[0];
const lineNum = 2;
const baseWidth = window.getComputedStyle(ele).width;
const baseFontSize = window.getComputedStyle(ele).fontSize;
const lineWidth = +baseWidth.slice(0, -2);
// 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));
let content = '';
// 多行可容纳总字数
const totalStrNum = Math.floor(strNum * lineNum);
const lastIndex = totalStrNum - totalTextLen;
if (totalTextLen > totalStrNum) {
content = text.slice(0, lastIndex - 3).concat('...');
} else {
content = text;
}
ele.innerHTML = content;
}
formatStr();
window.onresize = () => {
formatStr();
};
</script>
<body>
<div class='demo'></div>
</body>示例图片
核心 CSS 语句
优点
短板
适用场景
Demo
<style>
.demo {
overflow: hidden;
max-height: 40px;
line-height: 20px;
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
示例图片
核心 CSS 语句
优点
短板
适用场景
Demo
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>示例图片
核心 CSS 语句
优点
短板
适用场景
Demo
<style>
.demo {
background: #099;
max-height: 40px;
line-height: 20px;
overflow: hidden;
}
.demo::before{
float: left;
content:'';
width: 20px;
height: 40px;
}
.demo .text {
float: right;
width: 100%;
margin-left: -20px;
word-break: break-all;
}
.demo::after{
float:right;
content:'...';
width: 20px;
height: 20px;
position: relative;
left:100%;
transform: translate(-100%,-100%);
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>示例图片
原理讲解
有 A、B、C 三个盒子，A 左浮动，B、C 右浮动。设置 A 盒子的高度与 B 盒子高度（或最大高度）要保持一致
凡重复的，让它单一；凡复杂的，让它简单。
每次都要搞一坨代码，太麻烦。这时候你需要考虑将文本截断的能力，封装成一个可随时调用的自定义容器组件。市面上很多 UI 组件库，都提供了同类组件的封装，如基于 Vue 的 ViewUI Pro，或面向小程序提供组件化解决能力的 MinUI。
转载链接：https://segmentfault.com/a/1190000020920000
*请认真填写需求信息，我们会在24小时内与您取得联系。
