![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
糯米麻糖
全栈开发:react + node + mysql/mongodb
展开
-
H5视频上传与播放
看需求似乎很简单,再加上本身antd-design已经封装好的Upload组件,功能强大且丰富;但是具体需求场景中还是有不少交互细节,也花了一些时间调试,为以后碰到类似场景更快速高效实现,记录和分享出来。一般二进制处理,可以支持各类文件格式,本质视频也是文件的一种格式;这样就解决了,Modal弹窗承载视频播放,Modal弹窗的宽高与视频的宽高一致;(1)配置中支持上传视频、上传成功后封面缩略图展示,点击后自动播放视频;(1)实现代码如下:被注释掉的代码:交互效果,点击直接新开页。原创 2023-02-24 20:48:21 · 2151 阅读 · 0 评论 -
create-react-app脚手架本地调试
代码】create-react-app脚手架本地调试。原创 2022-07-22 16:52:10 · 248 阅读 · 0 评论 -
create-react-app脚手架核心源码之/packages/react-scripts解读
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsjGCYba-,代码从上到下按需执行解析。执行完成后,就去新建的项目。源码解读,详细可以从。到这里是不是很眼熟,脚手架初始化的项目,,运行完成,新建项目。...原创 2022-07-21 19:39:20 · 453 阅读 · 0 评论 -
create-react-app脚手架核心源码之/packages/create-react-app解读(五)
在create-react-app脚手架的目录为函数定义执行app创建${.cyan(.)}${.===?'isnot'}${.cyan()}${.cyan('react')}${.cyan()}${.cyan(.)}${?`with${chalk.cyan(.name)}`''}${}${.cyan(.)}${.cyan()}${.cyan(`${appName}/`)}${.cyan(.,'..'原创 2022-07-21 19:35:25 · 179 阅读 · 0 评论 -
create-react-app脚手架核心源码之/packages/create-react-app解读(四)
在create-react-app脚手架的目录为函数定义创建reactapp${.}${.green()}${.}${.}原创 2022-07-21 18:05:39 · 145 阅读 · 0 评论 -
create-react-app脚手架核心源码之/packages/create-react-app解读(三)
解读函数作用一个promise函数,发起HTPP请求,成功返回对应的版本。在create-react-app脚手架的目录为。当前版本为5.0.1。原创 2022-07-21 18:02:58 · 83 阅读 · 0 评论 -
create-react-app脚手架之/packages/create-react-app核心源码解读(二)
检查Npm是否可以读取Cwd首先看下源码${.bold()}${.bold()}${.cyan('reg')}${.cyan('reg')}原创 2022-07-21 17:43:25 · 121 阅读 · 0 评论 -
【前端RSA加密】
前端RSA加密原创 2022-07-18 14:55:21 · 3894 阅读 · 0 评论 -
antd pro使用问题记录
相关问题:按照官方文档,初始化项目,完成运行yarn start/dev报错如下输出:仔细看msfu相关文件报错,Google搜索什么是msfu?mfsu 是一种基于 webpack5 新特性 Module Federation 的打包提速方案。核心原理是将应用的依赖构建为一个 Module Federation 的 remote 应用,以免去应用热更新时对依赖的编译。因此,开启 mfsu 可以大幅减少热更新所需的时间。在生产模式,也可以通过提前编译依赖,大幅提升部署效率。尝试解决原创 2022-02-26 15:41:34 · 295 阅读 · 0 评论 -
UC浏览器兼容问题
背景项目中列表页测试在UC浏览器中发现白屏,查看控制台unexpected token …猜测像是解构与法报错,本地运行代码发现是node_modules里文件解构与法报错报错npm库库名: dynamic-file查看代码,src/main.js,函数中有一个…other项目中引用dynamic-file的作用在npm库中的链接:https://www.npmjs.com/package/dynamic-file从库命名可以可以看出来是动态加载资源文件,umd规范,无任何依赖,动态加载j原创 2022-02-26 15:16:56 · 770 阅读 · 0 评论 -
JSMpeg视频直播demo实践
背景:在升级公司内部头部依赖包的时候遇到的问题:在升级头部的时候,头部依赖的包,没有锁包,安装依赖库的时候包依赖的包会自动升级├─┬ @cnstrong/xxx│ ├─┬ eslint@6.8.0│ │ ├─┬ inquirer@7.3.3│ │ │ ├─┬ chalk@4.1.0chalk@4.1.0需要node10以上版本;服务器上的node版本是8,所以老项目大部分应该用到的都是node8的版本,项目中的npm库依赖于node8大部分包对node版本兼容比较好,但是有少数的包比较强依原创 2022-01-22 19:35:14 · 3696 阅读 · 0 评论 -
【UEditor富文本框】支持图片上传到文件服务器
上传图片到服务器import API from "@utils/api";import { MAX_SIZE } from '@utils/sheet/constant'import { message } from "antd";export const requestUploadImg = (blob: any, width: number, pageHeight: number) => { let imgWidth: number; if (width) { imgW原创 2022-01-22 18:59:42 · 658 阅读 · 0 评论 -
【UEditor富文本框】React支持图片粘贴
支持图片粘贴 /** * 图本粘贴处理 * @param url String 图片链接 */ function pasteWordWithImg(htmlStr, imgArr) { let str = htmlStr; if (imgArr.length === 1) { const { upImgUrl, upWidth, upHeight } = imgArr[0]; getImgToBase64( upImgUrl,原创 2022-01-22 18:58:45 · 462 阅读 · 0 评论 -
【UEditor富文本框】 React图片复制功能
支持图片复制 /** * URL转base64 * @param url String 图片链接 * @callback Function 获取base64格式后的回调函数 */function getImgToBase64(url, width, height, callback) { let canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); co原创 2022-01-22 18:57:44 · 250 阅读 · 0 评论 -
【UEditor富文本框】react图片上传插件注册
富文本中图片上传插件注册开发// @ts-nocheckimport { requestUploadImg } from "./pageImageSave";/** * 富文本框上传图片插件 * @param UE * @param width * @param pageHeight */export const imgPlugin = (UE, width, pageHeight) => { UE.ui["diyimg"] = function (editor) {原创 2022-01-22 18:56:21 · 375 阅读 · 0 评论 -
React Hooks方式下富文本框失焦优化性能,判断内容是否改变
class组件法的实现传统Class方式下,很容易想到UNSAFE_componentWillUpdate,将nextProps与当前的props比较便可知道高度是否发生了变化UNSAFE_componentWillUpdate(nextProps) { if (this.props.height && nextProps.height && this.props.height !== nextProps.height && ueditor .原创 2022-01-22 18:50:06 · 571 阅读 · 0 评论