Angular2 + NodeJs 上传图片到服务器

一个小小的功能,花了接近一天的时间才搞定。网上虽然有很多关于Angular2 上传图片的博客,但基本对我都帮助不大。大多数博客的问题在于,他们只是贴了大段的代码,完全没有强逻辑性的文字描述,大大提高了别人从博客中学习的成本。可能甚至连他们自己都不清楚这个功能是怎么实现的,为什么这样写就能实现了。所以我每次写博客的时候都会先给出一个解决问题的步骤,然后再按步骤进行解决,并贴出相应的代码。这样写的好处是将问题拆分成一个个小问题进行解决,即使别人在参考你的博客的过程中遇到了问题,也可以针对出问题的小点进行其他的搜索,而不必否定整篇博客,重新去看其他的博客。闲话说到这里,回归正题。

虽然接触前端挺久的了,但是图片上传对我来说一直是一个黑盒似的操作。之前也基本是用表单进行提交,中间具体转换成什么,怎么传输到服务器一概不知。如果不用表单,也不知道该怎么实现图片上传,当然不算微信这种提供了相应的api 的“框架”。直到这两天研究angular + nodejs 上传图片的时候才想到一个问题:图片是可以转换成base64 编码的,而base64 编码就是一个字符串,如此一来,那图片上传跟普通的ajax 请求不就没什么区别了吗?

问题已经很清楚了,我们只要在前端构造一个对象,对象中存放个图片的名字类型等信息外加base64 编码,然后把这个对象通过ajax 请求发送给服务器端即可,服务器端接收到请求以后,拿出图片的base64 编码,还原为图片,存储到服务器端的某一个路径下,然后把该路径返回给前端,即可完成图片从浏览器端到服务器端的传输操作。接下来,就是实操环节了。

1. 前端

首先,我们需要通过给html 的input 标签绑定一个事

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值