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

注意: 这个是依赖react15.2的,react中是不能向前兼容的,所以react16版本是会报错的。兼容方法可以参考我的另一篇文章

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

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

react中后台管理图片上传功能_第1张图片

先安装

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

react中后台管理图片上传功能_第2张图片

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

react中后台管理图片上传功能_第3张图片

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

项目中的效果

react中后台管理图片上传功能_第4张图片

已经上传请求了

react中后台管理图片上传功能_第5张图片

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

react中后台管理图片上传功能_第6张图片

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

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

你可能感兴趣的:(react中后台管理图片上传功能)