你将收获
常用的图片上传功能实现方案
手写一个图片/文件上传组件
如何将裁剪功能集成到上传组件中
内容平台/可视化平台下的图片自治方案
如何扩展出更强大的图片上传方案
正文
作为一名前端工程师, 解决项目问题是我们的基本职责之一...常用的图片上传方案
从web1.0时代开始, 我们用的最多的上传方案就是form表单, 我们只需要在form内写好各种input(输入型元素), 并定义好上传的服务器地址(action)即可.形式类似如下..., 而且兼容性都可以达到IE9(虽然现在来说兼容IE浏览器意义不大, 但是还是要了解一下)
1.2 ajax + formData方案
在XHR盛行之后,我们可以轻松使用ajax来实现异步请求了, 对于文件上传..., 我们也可以更灵活的使用ajax和formData来实现, 逐渐脱离了对原生form表单的依赖....当然我们还可以使用react-cropper来实现, 它提供了更灵活的裁切控制以及裁切实时预览功能, 如下图所示:
3.