如何用 React 完成图片上传功能

编辑推荐：稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！

• 原文地址：Image Upload and Manipulation with React

• 本文已获得原作者 Damon Bauer 的授权

• 译文出自：掘金翻译计划

• 译者：DeadLion

   

• 校对者：mypchas6fans, Kulbear

下面这篇特邀文章是由 Damon Bauer 完成的，主题是关于一个 web 开发人员非常常见的工作：为用户提供图片上传功能。我想说这并不容易，但是有了一些功能强大的工具来帮忙做一些比较“重”的工作，这个任务会觉得比以前轻松许多。Damon 甚至全程在浏览器中完成了这项任务!

对于 web 开发者来说，让用户能够上传图片是一件很常见的事情。一开始可能看起来小菜一碟，但是当真正创建一个图片上传组件的时候，还是有些问题需要去考虑的。这里有一些注意事项：

• 允许什么类型的图片上传?

• 需要多大的图片? 这对性能有何影响?

• 图片长宽比例应该是多少?

• 如何管理图片? 能扑捉到不良图片吗?

• 图片存储在哪? 如何运维?

诸如 Paperclip 和 ImageProcessor 这样的服务器端工具，能解决上面大部分的问题。不幸的是，目前还没有一个能用在单页应用上的现成的工具。我将向你们展示我是如何在一个 React 应用中解决这个问题的，完全没有用到服务器端语言。

这是我们将要构建的应用的一个小样品。

工具包

我用到了下面三个工具:

• react-dropzone 来接受用户的图片

• superagent 转换上传的图片

• Cloudinary 存储图片和编辑图片。

设置 Cloudinary

Cloudin