首页 >> 大全

全栈项目(react+ts改造b站全栈vue项目) 王者荣耀app端web管理端

2023-12-20 大全 33 作者:考证青年

技术: 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解析请求的数据体的操作。

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了