axios

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

1.前端报错 Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin 'http://localhost:808 2.开始以为是跨域问题 已经在入口文件增加header('Access-Control-Allow-Origin: *');//支持全域名访问 但是仍然不行 3.原因是前端使用了框架-axios 完整的配置 header('Pragma: no-cache', false); header('Access-Control-Allow-Origin: *');//支持全域名访问 header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE');//支持的http动作 header('Access-Control-Allow-Headers:x-requested-with,content-type');//响应头 来源： oschina 链接： https://my.oschina.net/songms/blog/4334008

什么是跨域 跨域 ： 一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源请求（内部的引用，脚本script，图片img，frame） 3.script内部发起的请求（ajax，dom请求，和js跨域调用 跨域问题出现 ： 只有浏览器端出现，直接用终端请求，是不会出现跨域拦截，是属于浏览器端的安全策略，浏览器将不同源的请求进行了拦截，限制了跨域资源访问 什么是同源 同源策略：same origin policy，如果两个资源（页面）`协议`,`域名`,`端口`都相同，那么就是同源。 即使：两个不同域名指向同一个ip，也算非同源 非同源（跨域）有哪些限制 * cookie，localstorage，indexDB无法读取 * Dom和JS对象无法互通 * Ajax请求不能发送 常见的跨域demo URL 说明 是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路径 允许 http://www.domain.com/lab/c.js http://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名，不同端口 不允许 http://www.domain

最近的项目用到了echarts一个带有散点地图的图表,按照正常jquery写法应该使用ajax请求geojson的数据动态去切换地图,就像下面这样 $.get('Js/map/' + cityData.name + '.json', function (geoJson) { map( 'gr-map', cityData, geoJson, geoCoordMap); // 调用地图方法 }); 页面显示(成功) but我们使用vue重构了这个项目,在写到这里的时候发现地图不显示了,结果报错 在这里使用的vue-axios去请求数据,写法如下 var url = 'http://localhost:8080/static/map' + cityData.name + '.json' ; console.log(url) this .$http.get(url).then(geoJson => { // 请求数据成功 if (geoJson) { that.map( 'gr-map' , cityData, geoJson, geoCoordMap); } }, response => { // 请求数据失败 }); 套路还是原来的套路,配方还是原来的配方,但是为啥会报错呢,第一反应就是地图没有注册上,找到注册地图的代码发现也没有问题,既然如此那就是数据有问题了

云栖号资讯：【 点击查看更多行业资讯 】 在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！ 有一天，你在浏览器里输入了 twitter.com ，然后看到了某人发的一条关于如何使用 React Hooks 的新消息。但是，由于某些原因，你的公司或团队并没有转而使用 Hooks。或者，也许你正在使用它们，但不是以一种新的“符合潮流”的方式。也许你正在使用 Vue.js 或者 Angular，但是 React Hooks 无处不在。 这一天，你开始质疑你代码库中的内容是否正确？你是否应该用你刚刚读到的内容来重构那部分逻辑？得出答案后，你开始想象它在自己的代码中会是什么样子。 现在，你突然有了使用它的冲动。你告知团队负责人，或者向整个团队发送消息介绍这个又酷又新潮的方法，然后提出你要开始使用它。 重写代码 不久前， @ThePracticalDev 的 Twitter 账户上出现了一本假想著作的封面。早在 2016 年，取笑多变的 JavaScript 世界就是一种时尚，虽然方式与今天有所不同。 嘘，我发明了时间机器（不要告诉任何人）！让我们闪回到 2016 年。嗖的一声！我们到了。JavaScript 生态圈看起来是这样的： 如果你正在使用 JavaScript 框架或是想要使用一个框架，你可能会选择 Angular.js。但是，你很快就会看到这样的消息：Angular

要搞一个小型的cms内容发布系统 因为小程序上线之后，直接对数据库进行操作的话，慧出问题的，所以一般都会做一个管理系统，让工作人员通过这个管理系统来对这个数据库进行增删改查 微信小程序其实给我们提供了这样的能力了 （也就是可以在自己已有的服务器来进行云操作，所以就可以通过这个CMS内容管理系统来对云数据库进行修改） 我们就要建立自己的web服务器--》搭建一个简易的服务器 https://koa.bootcss.com/ 这个是要node版本是7以上，可以在node官网去搭建，我这边之前按照过了，直接cmd打开，通过 node -v查看版本 然后还要下载一个 cnpm，这个主要是下载第三方模块用的 https://www.cnblogs.com/biglovevolcaner/p/6707746.html 打开cmd，直接输入这位大佬博客里面的语句进行安装即可了 这些都准备好了之后，就可以开始koa2的服务器搭建了 我们选择koa的脚手架 koa-generator https://blog.csdn.net/sinat_39049092/article/details/104575018 （跟这个博客到第三步就行） 然后我们就可以到想要搭建系统的文件中（我在d盘新建了一个weapp文件） 在cmd中输入 D:\weapp 之后输入 d：即可跳转 输入 koa2 miaomiao

日常业务中我们通常会对axios进行封装来使用，这么做的好处是：我们可以在每次请求前对请求做处理还可以对错误进行统一处理，从而避免每次发请求都要做重复的工作。比如：我们每次发送请求前都需要对请求的url做处理，就可以用到axios请求拦截；对后端返回的错误或网络错误通过响应拦截进行统一处理 等等。 //fetch.js const fetch = Axios.create({ withCredentials: true, baseURL:baseURL, validateStatus: function (status) { return status >= 200 && status < 404; // 默认的 }, }) //请求发送前拦截，根据地址重新配置域名，再子路由请求时必须加/ 例如：请求 localhost:80/app/inset fetch.get('/app/inset'); fetch.interceptors.request.use(function (config) { // let url=config.url; // //判断是否是全地址，全地址不做转换，非全地址根据二级参数判断请求的域名 // if(!url.startsWith("http://")&&process.env.NODE_ENV==='development'){ // config

导航 写一个axios-ts吧！学习Rollup（一） 写一个axios-ts吧！Rollup搭建typescript库（二） 写一个axios-ts吧！学习Prettier（三） Prettier是什么 Prettier 是一个代码格式化的工具，它会按照某一规范格式化代码。 为什么要使用Prettier 我的理解 通用的样式指南比团队讨论的要好，与其浪费大量时间讨论，不如 npm i 一下。所以为什么不用其他的而是用 Prettier 呢？ Prettier 是唯一全自动化的。希望停下讨论风格，虽然是有效的，但是时间浪费太多。到底用哪种风格，单引号还是双引号？不要再研究了，换个思路，我们要不要使用 Prettier ？只要大家选择同意就可以了。 使用 Prettier 的好处就是： 节省时间 避免低级错误 只管写代码，格式化交给 Prettier 结合 githook 减少 PR 中的样式问题 跟其他工具良好的结合 总之一句话，格式化用 Prettier 就对了。 怎么使用 官方文档 prettier官网 开始学习 ClI 使用 prettier 命令运行 Prettier ，选几个常用的，具体移步 prettier官网 --check / -c 检查文件是否已格式化，将结果打印到控制台，错误码： 0: 正确 , 1: 格式不正确 , 2: prettier出现错误 。

前言 作为一位 Vuer（vue开发者），如果还不会这个框架，那么你的 Vue 技术栈还没被点亮。 Nuxt.js 是什么 Nuxt.js 官方介绍： Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。 我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 如果你熟悉 Vue.js 的使用，那你很快就可以上手 Nuxt.js 。开发体验也和 Vue.js 没太大区别，相当于为 Vue.js 扩展了一些配置。当然你对 Node.js 有基础，那就再好不过了。 Nuxt.js 解决什么问题 现在 Vue.js 大多数用于单页面应用，随着技术的发展，单页面应用已不足以满足需求。并且一些缺点也成为单页面应用的通病，单页面应用在访问时会将所有的文件进行加载，首屏访问需要等待一段时间，也就是常说的白屏，另外一点是总所周知的 SEO 优化问题。 Nuxt.js 的出现正好来解决这些问题，如果你的网站是偏向社区需要搜索引擎提供流量的项目，那就再合适不过了。 我的第一个 Nuxt.js 项目 我在空闲的时间也用 Nuxt.js 仿掘金 web