react怎么上传图片

react中后台管理图片上传功能

注意: 这个是依赖react15.2的,react中是不能向前兼容的,所以react16版本是会报错的。

在写后台管理系统的时候,经常是会碰到添加商品时有一个图片上传功能,这里是在react框架中实现图片上传功能。这个图片我们通过ajax上传过去。

首先,我们到github上去搜索一下,搜索react fileupload。如下图。

企业微信截图_16008265723453.png

先安装

企业微信截图_16008265781830.png

安装之后到项目中使用,将初始化代码复制下来

企业微信截图_16008265831799.png

给文件上传可以新建一个组件,放在util文件夹下。

企业微信截图_16008265892275.png

写好fileupload组件,然后到需要的添加页面中引入自己封装好的上传组件

企业微信截图_16008265955039.png

项目中的效果

企业微信截图_16008266002630.png

已经上传请求了

企业微信截图_16008266054879.png

接下来我们修改一下,让这个上传功能更加人性化。

企业微信截图_16008266119401.png

我们再到项目中预览一下。

企业微信截图_16008266163106.png

好了,这下我们的图片上传就完成了。

更多相关技术文章,请访问HTML中文网

以上就是react怎么上传图片的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏