- 博客(92)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 一个企业级的文件上传组件应该是什么样的
大家好这里是阳九,一个中途转行的野路子码农,热衷于研究和手写前端工具.我的宗旨就是 万物皆可手写本文适合有一定node后端基础的前端同学,如果对后端完全不了解请恶补前置知识。废话不多说,直接进入正题。我们来看一下,各个版本的文件上传组件大概都长什么样等级功能青铜-垃圾玩意原生+axios.post白银-体验升级粘贴,拖拽,进度条黄金-功能升级断点续传,秒传,类型判断铂金-速度升级web-worker,时间切片,抽样hash钻石-网络升级异步并发数控制,切片报错重试王者-精雕细琢。
2023-04-04 14:00:46
181
原创 图片转换js （img对象，file对象，base64，canvas对象），以及图片压缩方式
首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；
2022-12-10 14:18:05
1290
转载 React函数组件性能优化之useEffect、useMemo、useCallback、React.memo
前言react函数组件不想类组件那样有生命周期函数，以及state。但是我们可以通过hook来优化我们的性能。一个组件重新重新渲染，一般三种情况：要么是组件自己的状态改变 要么是父组件重新渲染，导致子组件重新渲染，但是父组件的 props 没有改变 要么是父组件重新渲染，导致子组件重新渲染，但是父组件传递的 props 改变React.memofunction Test() { const [value,setValue] = useState(0) return
2022-01-18 13:48:09
1053
原创 class类
1.类的简介/** js中使用class关键字定义一个类* 主要包含两个部分(属性及方法)* 定义属性* 前面加 readonly 表示只读属性,无法修改* 直接定义的属性是实例属性,需要通过对象的实例去访问,如 console.log(per.name);* 在属性前使用static关键字可以定义类属性(静态属性),可以直接访问,如 console.log(Person.age);* 定义方法* 同理 直接定义的方法是实例方法,需要通过对象的实例去访问,如 per.say();*
2021-11-09 17:21:40
303
原创 vue实现横向或竖向滑动轮播
<template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" :class="{animation:animate}" :style="{transition: `${animate?'all '+(duration/2000)+'s':'none'}`}" .
2021-06-09 10:52:14
3634
2
原创 微信小程序多图批量上传
主要使用async/await及Promise实现同步,具体代码如下: //选择图片 ChooseImage() { const count=3; uni.chooseImage({ count, sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album','camera'], //从相册选择 success: a.
2021-03-13 14:28:00
407
原创 微信小程序错误码参考大全
微信小程序错误码参考大全状态码（场景值） 说明 -1 系统繁忙 0 请求成功 40001 验证失败 40002 不合法的凭证类型 40003 不合法的OpenID 40004 不合法的媒体文件类型 40005 不合法的文件类型 40006 不合法的文件大小 40007 不合法的媒体文件id 40008 不合法的消息类型 40009 不合法的图片文件大小 4001...
2021-01-06 12:01:13
5858
原创 md5.js
function md5(string) { var x = Array(); var k, AA, BB, CC, DD, a, b, c, d; var S11 = 7, S12 = 12, S13 = 17, S14 = 22; var S21 = 5, S22 = 9, S23 = 14, S24 = 20; var S31 = 4, S32 = 11, S33 = 16, S34 = 23; var S41 = 6, S42 = 10, S43 = 15, S44 = 2.
2021-01-03 17:23:52
1696
原创 yarn与npm常用命令对比
npm yarnnpm init yarn init // 初始化npm i | install yarn (install) // 安装依赖包npm i x --S | --save yarn add x // 安.
2020-12-29 10:09:49
169
原创 基于axios封装通用的http网络请求,并防止多次重复触发请求
import Qs from 'qs';import axios from 'axios';import {Error} from './notification';//引入Notification通知组件import NProgress from 'nprogress';import 'nprogress/nprogress.css';//加载条配置NProgress.configure({ easing: 'ease', // 动画方式 speed: 500, // 递增进度.
2020-12-10 09:33:05
483
原创 基于fetch封装通用的http网络请求
源码/** * @author xinye * @version 1.0.0 * @date 2020/12/3 * @description 系统通用fetch数据请求 */// 请求返回状态码const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队（异步任务）。', 204: '删除数据成功。', 400: '发出的请求有错误，服务器
2020-12-03 18:15:48
604
转载 纯CSS绘制三角形（各种角度）
CSS三角形绘制方法，学会了这个，其它的也就简单。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法代码如下:#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-rig...
2020-11-16 10:36:48
475
原创 全国省市经纬度
const Data = [ { "label": "北京市", "lat": "39.9081726", "log": "116.3979471", "children": [ { "label": "北京市", "lat": "39.9081726", "log": "116.3979471" } ] }, { "label": "福建省", "lat": "26.0785904", "log": "119.29781.
2020-10-26 13:59:41
780
原创 世界各国简称 电话区号JSON数据
{ "list": [{ "city": "中国大陆", "code": "+86" }, { "city": "中国香港", "code": "+852" }, { "city": "中国澳门", "code": "+853" }, { .
2020-10-26 13:57:04
1605
原创 uniapp 模块权限配置 权限管理中英对照
权限 名称 描述 android.permission.ACCESS_CHECKIN_PROPERTIES 访问登记属性 读取或写入登记check-in数据库属性表的权限 android.permission.ACCESS_COARSE_LOCATION 获取错略位置 通过WiFi或移动基站的方式获取用户错略的经纬度信息,定位精度大概误差在30~1500米 android.permission.ACCESS_FINE_LOCATION 获取精确位置...
2020-08-28 13:46:39
2827
原创 在vue.js上使用websocket
在vue.js上使用websocket有两种方法:方法一:使用内置websocket实现data() { return { websock: null, }},mounted() { //初始化 this.initWebSocket();},methods() { initWebSocket(){ //初始化weosocket const wsuri = this.config.ws_server;
2020-06-30 13:35:47
1308
原创 vue导出excel
1.安装依赖1 npm install file-saver -S 2 npm install xlsx -S3 npm install -D script-loader2.导入两个JS文件Blob.js和Export2Excel.js在src目录下新建vendor文件夹，里面放入Blob.js和Export2Excel.js两个JS文件。目录大概是这样的：3.在mai...
2020-05-08 10:30:45
261
原创 vue使用scss，并且全局引入公共scss样式
第一步：安装依赖npm install node-sass --save-devnpm install sass-loader --save-devnpm install style-loader --save-devnpm install sass-resources-loader --save-dev第二步：配置build/utils.jsscss: generateLo...
2020-04-29 17:12:28
2059
转载 小程序onLaunch 与 onload 的异步问题(微信,支付宝实测可用)
小程序app.js 中 onLaunch 与 index.js 中 onload 的异步执行问题 ， 在同时触发的情况下 如何等待返回值而响应index中 onload的内容比如说 获取用户的openid或者凭证 在没返回需要的数据之前 index.js 的 onload会执行 从而导致后续的代码没有openid的支持 *ES6中提供了一个promise方案是一个不错的解决方案promi...
2020-04-10 16:42:03
1068
原创 react项目通过iframe方式引入html页面
主要实现：通过<iframe>方式引入，以下是核心代码部分：import data from './data.html'; // 引入需要引用的html文件 class Data extends Component { render() { return ( <iframe title="resg" srcDoc...
2019-12-24 14:23:52
2005
2
原创 react-router v4 参数传递
引注意：路由表改变后要重启服务 方式 一： 通过params 1.路由表中 <Routepath=' /user/:id ' component={User}></Route> 2.Link处 ...
2019-12-17 11:35:19
212
原创 L2Dwidget 动漫
可参考https://huaji8.top/post/live2d-plugin-2.0/选模型,模型地址https://github.com/xiazeyu/live2d-widget-models/tree/master/packages,中文文档https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md...
2019-12-11 11:27:29
1346
原创 vue+vuex+vue-router+elementui实现无限标签页后台管理系统框架(动态路由)
效果图App主页面<template> <div id="app"> <router-view/> </div></template><script>export default { name: 'App', created(){ //禁止浏览器回退,只能回退一次 ...
2019-11-26 17:49:04
3218
3
原创 axios导出Excel文件乱码
解决方案一:axios({ method: method, headers: { 'Content-Type': 'application/json; application/octet-stream' }, url: root+url, params:parm, data: data, responseType: 'arr...
2019-11-23 10:18:27
570
原创 解决elementUI表格表头错乱
1.网上使用最多的,个人测时没效果// 全局设置body .el-table th.gutter{ display: table-cell!important;} body .el-table colgroup.gutter{ display: table-cell!important;}2.使用el-table的doLayout方法(场景:el-table新加...
2019-11-08 13:56:11
575
转载 使用secure-ls加密localStorage数据,具有高级加密和数据压缩功能
特性:secure-ls源代码下载npm install secure-ls使用AES。DES。Rabbit和RC4等各种加密方式保护数据。 ( 默认为Base64编码)。 将数据存储到localStorage之前压缩数据以保存额外的字节( 默认为true)。 通过localStorageAPI实现高级API包装，提供其他基本工具。 将数据保存在多个键 ...
2019-11-08 13:44:17
4074
原创 解决使用vuex刷新页面state数据消失
在实际的vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。 Vuex劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。实际问题：在v...
2019-11-06 17:30:36
665
原创 react引入antd样式失效
官网给出的按需加载解决方案，先必须安装 antd和babel-plugin-importnpm install antd --savenpm install babel-plugin-import --save-dev因为antd默认引入样式是less，所以需要手动配置为CSS，配置方法如下：运行 npm run eject暴露webpack.config.dev和webpac...
2019-09-06 19:56:12
3767
1
原创 vue+elementUI实现调用PC摄像头拍照上传图片（谷歌火狐测试可用，其他自测）
一定部署到https域名上，否则无法调用摄像头权限！！！效果图定义Data data () { return { dialogTableVisible:false, videoWidth: 500, videoHeight: 400, imgSrc: '', thisCancas: nul...
2019-08-28 17:13:33
6777
11
转载 微信小程序日期时间选择器使用方法
效果图实现原理利用微信小程序的picker组件的多列选择器实现！WXML<view class="tui-picker-content"> <view class="tui-picker-name">时间选择器（选择时分）</view> <picker mode="time" value="{{time}}" start="09:...
2019-08-24 17:14:42
1119
转载 vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
1. PC端调用摄像头拍照上传base64格式到后台，这个没什么花里胡哨的骚操作，直接看代码 （canvas + video）<template> <div> <!--开启摄像头--> <img @click="callCamera" :src="headImgSrc" alt="摄像头"> ...
2019-08-01 11:09:31
4111
1
原创 时间操作,计算,格式化
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期...
2019-07-09 11:18:18
117
原创 VUE插件大总结
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- 三端...
2019-05-07 22:48:45
369
原创 vue+elementUI实现导出el-table表格(fixed固定列数据不重复)
//安装依赖，主要是两个依赖:(xlsx 和 file-saver)npm install --save xlsx file-saversrc文件下建立个目录until（存放公用的js文件），until下建立个excel.js//引入依赖import FileSaver from 'file-saver';import XLSX from 'xlsx';// id绑定的i...
2019-05-07 19:50:16
6737
原创 js实现去除数组包含元素并自动向前增加效果
ojbk(m,n,x){ //m为初始数字，几开始 //n去掉谁，避几 //x数组长度 let list=[]; let a = x+m-1; let total=x+m; for(let j=m;j<total;j++){ list.push(j) } console.log(list)//[3,4,5,6,7,8,9,10,11,12,13,1...
2019-04-29 17:29:12
521
原创 求1-1000中2出现的次数
let arr=[];let x=0;let ojbk=[];let str='';for (let i=0;i<1000;i++){ arr.push(i+1)}function fn(n){ for(let i=0;i<arr.length;i++){ if (arr[i].toString().indexOf(n)>-1){ ...
2019-04-15 14:42:26
820
转载 node.js中fs模块+path模块
一、概述：文件系统模块是一个简单包装的标准 POSIX 文件 I/O 操作方法集。可以通过调用 require("fs") 来获取该模块。文件系统模块中的所有方法均有异步和同步版本。文件系统模块中的异步方法需要一个完成时的回调函数作为最后一个传入形参。 回调函数的构成由调用的异步方法所决定，通常情况下回调函数的第一个形参为返回的错误信息。 如果异步操作执行正确并返回，该错误形参则为nu...
2018-09-12 19:23:41
271
原创 fs模块文件操作
1、异步读取 fs.readFile( url , code , callback); 2、同步读取 fs.readFileSync( url , code ); 1 var fs = require('fs'); 2 // 异步读取 3 fs.readFile('input.txt', function (err, data) { 4 if (er...
2018-09-11 18:59:59
375
原创 TCP和UDP的优缺点及区别
TCP的优点： 可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有确认、窗口、重传、拥塞控制机制，在数据传完后，还会断开连接用来节约系统资源。 TCP的缺点： 慢，效率低，占用系统资源高，易被攻击 TCP在传递数据之前，要先建连接，这会消耗时间，而且在数据传递时，确认机制、重传机制、拥塞控制机制等都会消耗大量的时间，而且要在每台设备上维护所有的传...
2018-09-11 10:20:38
165
转载 JS字符串操作之增删改查
一、增1. concat()可以传任何个数的参数，用于字符串的拼接，返回连接后的字符串，而原字符串不受影响。例如：var str1 = 'Hello', str2 = ' World', str3 = '!';console.log(str1.concat(str2)); // "Hello World"console.log(str1.concat(str2,str3))...
2018-09-03 19:42:26
1069
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人