开课吧视频内容汇总

1. 前端读取文件内容， FileReader对象（兼容IE10+）

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
使用场景：文件读取和图片预览

具体实现可借鉴（https://www.jianshu.com/p/5fd16155901a）

2. 用户联网状态

在Chrome和Safari中，如果浏览器连接不上局域网 (LAN)或者路由器，就是离线状态；否则就是在线状态。所以当该属性值为false的时候，你可以说浏览器不能正常联网，但如果该属性值为true的时候，并不意味着浏览器一定能连接上互联网。还有其他一些可能引起误判的原因，比如你的电脑安装了虚拟化软件，可能会有一个虚拟网卡，这时它总是会显示正常联网。因此，如果你想得到浏览器确切的联网状态，应该使用其他额外的检查手段。

在Firefox和Internet Explorer中，如果浏览器处于"脱机工作"状态，则返回 false,其他情况都返回true.

 3. application/x-www-form-urlencoded 参数序列化 （具体借鉴jquery的$.param方法），后端接收到的数据格式是 a[0][a] = 1,并不会将其整理成对象或者数组

var nextStr = '';

function changeDataType(obj) {
    let str = ''
    if (typeof obj == 'object') {
        for (let i in obj) {
            if (typeof obj[i] != 'function' && typeof obj[i] != 'object') {
                str += i + '=' + obj[i] + '&';
            } else if (typeof obj[i] == 'object') {
                nextStr = '';
                str += changeSonType(i, obj[i])
            }
        }
    }
    return str.replace(/&$/g, '');
}

function changeSonType(objName, objValue) {
    if (typeof objValue == 'object') {
        for (let i in objValue) {
            if (typeof objValue[i] != 'object') {
                let value = objName + '[' + i + ']=' + objValue[i];
                nextStr += encodeURI(value) + '&';
            } else {
                changeSonType(objName + '[' + i + ']', objValue[i]);
            }
        }
    }
    return nextStr;
}

4 两种方式，一种是通过Vue.set, 另外一种是 直接在watch里改变

5 生命周期注意点，通过v-if来控制组件显隐，是会触发子组件的生命周期的，而keep-alive则可以缓存，然后只会触发activated、deactivated钩子函数；beforeCreate是获取不到data属性的；mouted只执行一次，要对每次视图变化都进行相关操作的话，要在updated里执行

6. 对于ajax请求，存在mounted先执行后才执行beforeCreate的ajax响应，async和promise都是一样

7. spa 的实现原理核心

8. 动态添加路由

9. axios

 10. 文件上传格式

form表单的content-type：enctype="multipart/form-data"
POST文件
<分隔符>\r\n字段信息\r\n\r\n内容\r\n<分隔符>\r\n字段头\r\n\r\n内容\r\n<分隔符>\r\n字段头\r\n\r\n内容\r\n<分隔符>--

--------------------------------------------------------------------------------

<分隔符>\r\n字段信息\r\n\r\n内容\r\n<分隔符>\r\n字段头\r\n\r\n内容\r\n<分隔符>\r\n字段头\r\n\r\n内容\r\n<分隔符>--

1.用<分隔符>切分
[
  null,
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
  '--'
]

2.第0个和最后1个，扔掉
[
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
]

3.每一项
"\r\n字段信息\r\n\r\n内容\r\n"

"字段信息\r\n\r\n内容"
"字段信息", "内容"

--------------------------------------------------------------------------------
<分隔符>可以通过boundary='--'+req.headers['content-type'].split('; ')[1].split('=')[1]获取;

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarykZzbr3mNbnA2Beus