给服务器一点礼物。
Post
有的时候用户会提交一些表单数据,我们应该如何去接收呢?前一篇我们已经写好了一个简单的表单页面,当用户提交表单时我们可以使用formidable
第三方模块,可以用npm
安装。然后我们来修改upload()
函数:
1 | function upload(request, response) { |
代码解释:
formidable.IncomingForm()
用来生成一个表单对象,form.encoding
是接受表单时采取的编码,这里设置为UTF-8。form.parse()
用来解析request
对象中的表单,然后回调函数的参数分别为错误err
,非文件数据fileds
,和文件数据files
,后面两个是两个对象,fileds
对象保存了非文件数据,比如文字,它的属性是在html中那些非文件数据的标签的name
属性,比如在html中定义了<textarea name="text">
,所以在上面的代码中我们用fileds.text
来访问这个数据,OK,让我们看看具体运行是怎么样的,输入文字(暂时还没有处理文件的能力):
提交:
啊咧?为什么中文出现乱码了?不是把编码设置为UTF-8了吗?
是这样的,代码里设置的是接收表单时的编码,当把数据响应回去的时候,并没有告诉浏览器用什么编码,所以出现乱码也并不意外,既然知道了,我们只要在响应头里说明编码就好了,修改response.writeHead()
:
1 | response.writeHead(200, {'Content-Type': 'text/html; charset="utf-8"'}); |
再提交一次试试:
OK!那么现在就只剩最后一件事,处理文件,其实有了formidable
模块处理文件也是相当的简单呢。再来说明一下我们想做的事情:用户上传文件后,我们把文件保存到本地,并且在浏览器上显示出来。
如何把图片保存到本地呢,我们可以借助fs.rename()
,功能就想名字一样重命名,我们在upload()
中添加:
1 | function upload(request, response) { |
__dirname
表示当前工作目录,当然事先要在当前目录下创建tmp/
文件夹,否则就会报错。然后我们尝试提交图片试试(当然这里限制是jpg了):
选择一张图片提交后,我们查看tmp目录下:
果然是多了一张图片,那么接下来考虑的就是如何把这张在本地的图片放上浏览器中显示呢?我们的想法是响应主体中添加一个img
标签,但标签的src
属性要写什么呢?是不是写图片相对于当前文件的路径呢?(不是,可以自己做个测试)
要知道在浏览器中的路径和本地是不一样的,我们想在浏览器中访问某个资源,相当于再从浏览器发送一个请求嘛,那么我们的办法就是再添加一个请求处理程序,来显示这张图片。
接下来我们在requestHandler.js中添加一个show()
函数来显示图片:
1 | function show(request, response) { |
实现思路也很简单,让我们看看显示效果如何:
总结
OK!最后也献上美图一张~这样我们就完成了所有的功能啦!通过这个简单的例子我们熟悉了几个常用的函数,当然只是简单的实现,还有更多的知识就要在不断实践中学习了,这些代码我放在github上,可以进行参考。