React+Antd上传文件至Tomcat服务端

需求：如题。

问题：
一开始脑袋就跟一团浆糊一样，理不清思绪，主要问题如下：
1、前台上传的文件在前台怎么取得？
2、在前台怎么将文件上传至后台?
3、后台返回的数据如何在前台展示？
4、这些东西在React中又是如何实现的？

其实之前弄过Ajax + jsp 实现这个功能，当时觉得挺简单的，也就没怎么深入去了解这一块，其实这里面的道道还挺多的。

前三个问题可以总结成一个问题：将图片从前台上传到后台，这究竟是一个怎样的过程？

这一过程如何使用React实现？

1 如何使用antd的Form表单组件

本来很简单的东西，但由于本人前端的基础实在很差，所以比较吃力，很多地方都不是太理解。

学这个就是，使用示例代码，根据需求做出调整，符合自己的要求了，就算有个基本的了解了。

就说一下其中的Upload组件吧

<Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="//jsonplaceholder.typicode.com/posts/"
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
</Upload>

name="avatar"，就是后台请求的文件的参数名称，切记两个要一致。
listType="picture-card"，确定了控件展示的样式。
action属性，只要传递了完整且正确的后台请求地址，在选择相应图片之后就会触发action，调用后台代码。

2 如何将图片上传并在前端展示

一般来说，后端存储上传文件方式有4种：

（1）数据库存储
直接把图片的二进制码存到数据库，可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733

优点:

去重较容易做，就是相同的图片只存一份。
备份使用数据库的备份方式简单。
容易管理，去掉无用的图片等。

缺点:

不适合超大量存储，数据的存储越大，恢复越麻烦。
当然一般还是需要前端做更多的物理缓存,而不是靠mysql来直接输出。

这个还是看需求，如果图片是小图片，像论坛使用的，并且需要注重他的优点的可以使用，至于量没有具体的，你要想想如果数据库遇到问题，它的重做和迁移是否方便的问题。
其实如果不是特殊情况一般存在数据库里都不是好的选择。平衡他的优缺点。

（2）webRoot下存储
利用上传组件把图片上传到web项目下，再存储图片的相对路径到数据库表中，需生成一个新的不会重复的图片名。

优点：易于实现。
缺点：显而易见。重新部署项目前需要重新把已上传的图片备份，待部署成功后拷贝到web项目下。

（3）web项目外存储
顾名思义，把图片上传到web目录外。

1.建立存放图片的目录和web项目下一目录之间的联系。

例如：
①Linux系统下，首先把图片上传到项目外一目录；
②然后把此目录挂载到项目内某一目录下mount --bind 实际存放图片目录项目内某一目录；
③然后把上传图片的相对路径存储到数据库表中；
④最后在项目中直接访问这个URL获取图片。

注意：

存放图片的目录需有上传权限；
在重新部署时，undeploy前先解除挂载umount 实际存放图片目录项目内某一目录；
待项目上传成功后再重新建立挂载，否则在undeploy时可能丢失已上传的图片。

缺点：每次部署前后要进行挂载，解挂载操作，易误操作丢失资源

配置虚拟路径
例如使用tomcat时：首先把图片上传到项目外一目录下；然后在tomcat中配置一个虚拟路径指向上传目录命名为 "/fileUpload" (在/conf/server.xml下配置Context即可)；然后把上传图片的相对路径存储到数据库表中，再在程序中通过访问这个虚拟路径 "/fileUpload" + 数据库中存储的相对URL 来获取文件资源；（其实相当于在tomcat下重新启动了一个web项目，然后通过访问此web项目下的图片资源，这样其实也可以通过 http://ip:port/webProject/ resourse）。

优点：可以使用tomcat的配置文件将某个请求映射到物理路径下，完成图片的回显。

常用的方式（重点）：
1 idea设置tomcat虚拟路径的两种方法
2 在intellij IDEA中为web应用创建图片虚拟目录

最后

在将图片上传到指定位置之后，更新数据库信息，存储图片地址信息（这个信息可以直接通过上面说的localhost:port/tomcat配置文件地址访问），将该数据返回给前台，完成图片回显。

p.s.如果使用 antd的组件的话，就不用考虑最后的回显问题了，它把这些功能都做好了。

3 如何使用React的http请求组件：axios

先了解下这到底是这个啥东西吧
Jquery ajax, Axios, Fetch区别之我见

api
https://www.kancloud.cn/yunye/axios/234845

gitbub地址
https://github.com/axios/axios