信息爆炸的时代,获取到信息的门槛大大降低,但同时也加大了我们理解信息的难度。针对某一个问题,网上会有关于这个问题的好多篇博客或文章。但是翻过一遍后会发现,这些文章中去掉全文都是代码、什么解释也没有的,复制粘贴的,使用各种不必要的框架解决问题的,描述逻辑混乱的,再去掉排版不好看着不舒服的,之后也没几篇能看的了。每个人似乎都在想要提供一个解决方案,但是描述问题的时候能否按逻辑来,一步步走,代码加点注释啥的。我自己写东西或者解决问题的时候喜欢先理清需求,划分步骤,然后一步一步来。比如说,NodeJs 如何实现上传图片到服务器。
1. 任务需求
很常见的一个场景。用户注册页面更换头像后,将图片上传到服务器存储并返回图片在服务器的地址。这里需要注意的一个问题是因为要获取服务器返回的图片地址,所以要异步提交表单。
2. 步骤划分
- 前端js 代码中判断表单中的图片发生变化时,异步提交表单。
- 服务器端js 接收到请求,存储图片并返回图片url。
- 前端js 处理返回请求获取图片url。
3. 代码实现
3.1 前端html
<img class="photo photo-img" src="">
<form id="img_form" action="" method="POST" enctype="multipart/form-data">
<input name="img" ty