全栈项目(react+ts改造b站全栈vue项目) 王者荣耀app端web管理端
技术: react+ts+node++ 1 上传图片问题
借用antd库的组件,参数是图片传去的后台地址,
逻辑就是,上传图片到后台,后台暴露静态资源,然后返回url给前端即可。
这里使用了的中间件,然后引用这个库做处理,
当我们点击上传后
接着第二个中间件就可以通过req.file拿到信息
接着将静态资源接口开放,然后返回url地址。
这样前台就能拿到url的地址了。
富文本框
网上白嫖一个很好用很简单的富文本框
官网
yarn add @/-react
只需要这样
目前还在研究中,等熟悉后会说明更多。
别人写的不错的博客:
方便我日后观看
在我后续的研究种发现这个富文本需要依赖网速,而且要通过官网才能使用,我又去网上找了一个,更好用的,
首先看效果
yarn add react-draft- draft-js -to-html html-to-
后面两个是html来回转换的库,视情况用到。
其实一看就能明白了,只是编辑器状态,是当状态改变时发生的回调函数。这两个没什么,重点是后面两个,
是控制编辑器的内容,而是点击编辑器就会触发,注意,是点击编辑器。
可以看下打印内容
这就是触发时拿到的内容,不同的type啥的,如果我们想拿到h’t’m’l
这就是转换后的html,
我这里用ts,所以有些类型可能会用到
!!!这里有个坑,就是我上面说的。的触发,并不是编辑器内容发生变化时触发,而是当你点击编辑器的时候,所以这时候你会发现,你的受控组件,因为我是用来控制它的值,在拿到最新的值再来改变它的,这时候当我点击编辑器,未输入文字时,已经触发完了,当我准备手动选择几个文字加粗时,只要我的鼠标点到编辑器时,就会更新我的值,从而让我无法改变里面的内容,因为在我没改变之前,他就触发了。所以这时候可以用
当我操作编辑器两s后,再来改变我的值,从而让我可以操作内容,也就是上图的效果。
富文本上传图片操作
主要是加上和这个回调函数
要求返回
然后我的后台返回了一个url,将这个url拼成入data{link:xxxx}的形式,这个是固定的。
后台使用,处理这个其实也相对容一
然后
静态资源开放。前端就可以访问了。如果还不懂可以看我的和Koa的文章,有详细的解释node解析请求的数据体的操作。