美文网首页Android开发经验谈Android技术知识Android开发
如何设计一个照片上传App--后端实现

如何设计一个照片上传App--后端实现

作者: Android架构 | 来源:发表于2019-03-18 20:34 被阅读18次

    这是“Android面试集锦系列(8)——如何设计一个照片上传App”的服务端实现。

    虽然网络上也有各种开放平台可以使用来上传图片,不过还是不及自己写一个来的直观和简单,而且可以加深你对文件上传整个流程的认识。

    这里我们介绍一个很简单的实现方式(至少代码量很少),用Node.js+express.js实现一个图片上传的后端服务。

    学习Node.js

    不太了解的Node.js和Express.js的可以先到它们的官方网站学习一下。

    Node.js:https://nodejs.org/ 也可以直接看中文翻译的:http://nodejs.cn/
    Express.js:https://expressjs.com/

    创建一个项目,安装express:

    npm init
    npm install express --save

    Http上传的知识

    我们在浏览器中上传文件一般都是使用表单上传文件,本质上就是post请求提交Content-Type为multipart/form-data的数据。

    在最初的http协议中,没有定义上传文件的Method,为了实现这个功能,http协议组改造了post请求,添加了一种post规范,设定这种规范的Content-Type为multipart/form-data;boundary={bound} ,其中{bound}是定义的分隔符,用于分割各项内容(文件,key-value对)。

    在Node.js端我们使用multer这个中间件来接收和处理上传的文件。

    常用的开源组件有multer、formidable等。multer是express官方推荐的文件上传中间件,它是在busboy的基础上开发的。

    安装:

    npm install --save multer

    带上传进度

    这里给一个例子给大家,使用的是socket的方式和前端进行上传进度的展示:
    https://github.com/kunalnagar/nodejs-basic-file-upload

    不过,我们这个项目的上传进度并不需要这么复杂,我们只需要在移动端监听上传的数据量就可以实现了,不需要后台专门提供一个接口或者服务来获得上传的进度。

    测试接口

    我们写了一个简单的测试界面,方便大家可以从浏览器可以直接看到后台服务提供的API的效果。

    我们有两个接口:

    1. 获取所有已上传图片的接口(GET):/photos

    在浏览器测试效果:

    1. 上传图片接口(POST): /upload
      在浏览器可以通过访问根地址获得一个上传的界面:

    选择图片后上传成功的效果:

    代码

    全部服务端的代码加起来不超过100行,可以直接到我的Github上下载:https://github.com/goeasyway/AndroidUploadImageDemo

    运行

    如果是从我的Github上下载的server端的代码,请选在server目录下运行:

    npm install

    安装完必要的中间件后,在命令行运行“node app.js”即可以启动服务端:

    注意:记得修改图片的url的IP为你服务端所在的IP。

    最后

    在这里我总结出了互联网公司Android程序员面试简历模板,面试涉及到的绝大部分面试题及答案做成了文档和架构视频资料免费分享给大家【包括高级UI、性能优化、架构师课程、NDK、Kotlin、混合式开发(ReactNative+Weex)、Flutter等架构技术资料】,希望能帮助到您面试前的复习且找到一个好的工作,也节省大家在网上搜索资料的时间来学习。

    资料获取方式:加入Android架构交流QQ群聊:513088520 ,进群即领取资料!!!

    点击链接加入群聊【Android移动架构总群】:加入群聊

    资料大全

    相关文章

      网友评论

        本文标题:如何设计一个照片上传App--后端实现

        本文链接:https://www.haomeiwen.com/subject/xyfimqtx.html