一.项目场景
项目中经常会用到上传图片上传视频等功能，由于后端nginx限制，经常要进行文件转化才能上传，大文件可能还要进行切片上传处理。
二.原生js实现上传功能的简单案例（上传图片）
1.html部分
2.js部分
inputClick () {
// 触发上传文件的文件框
document.getElementById('files').click();
let that = this;
document.getElementById('files').onchange = function (val) {
that.imgfiles = val.target.files[0];
}
console.log(this.imgfiles);
}3.控制台打印结果
三.将文件转化成base64、blob
1.base64：简单的来说base64就是一种二进制到文本的编译方式，base64不加密，浏览器加载快，但是他的大小要比原图片文件大，所以只有上传图片时建议大家转base64,视频文件的话就算了，低于50MB的视频大家也可以用base64。
getbase64 () {
let reader = new FileReader();
console.log(reader);
reader.readAsDataURL(this.imgfiles);
reader.onload = (e) => {
this.imgSrcbase64 = e.target.result;
console.log(this.imgSrcbase64);
}
}打印结果：
2.Blob：Blob（Binary Large Object）表示二进制类型的大对象。blob经常被用作上传大文件，通过blob构造函数生成一个blob对象对文件进行处理，生成一个blob文件流，blob是加密的，这点和base64完全不同，它还可以用到切片，为了更直观的了解blob，废话不说了，我也不是太懂这玩意，直接上代码。
getblob () {
let reader = new FileReader();
reader.readAsArrayBuffer(this.imgfiles);
reader.onload = (e) => {
let data;
if (typeof e.target.result === 'object') {
data = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data = e.target.result;
}
this.imgBlob = data;
console.log(this.imgBlob);
}
}打印结果：
css中元素垂直居中和水平居中方式
水平居中方案 text-align: center
text-align: center可以使行内级元素和行内块级元素在父元素中水平居中
Document
lorem
掘金代码片段
margin: 0 auto
margin: 0 auto可以使有设置宽度的块级元素在水平方向上居中
注意: 使用margin: 0 auto让块级元素水平居中的前提条件是 块级元素有设置对应的宽度
因为块级元素默认的宽度是独占父元素的一行，此时就不存在水平居中不居中的问题了
Document