node.js+android(使用HttpURLConnection和HttpClient)实现文件上传

最新推荐文章于 2014-12-08 22:05:54 发布
最新推荐文章于 2014-12-08 22:05:54 发布
阅读量3.9k 收藏 4
点赞数
分类专栏： node.js android 文章标签： android node.js layout upload file string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dellheng/article/details/7097490
版权

上一篇node.js 第三方模块如何安装(使用npm)及介绍  了formidable的安装，这一篇结合android写一个文件上传的例子。

先上服务端node.js 的代码，保存为upload.js

var http = require('http');
var fs = require('fs');
var formidable = require('formidable');

var firstPage = function(res){
	res.writeHead(200, {'Content-Type': 'text/html'});
	var html = fs.readFileSync(__dirname + '/public/form.html');
	res.end(html);
}

var resultPage = function(res,data,files){
    res.setHeader('Content-Type', 'text/html');
    res.write('<p>thanks ' + data.name + '</p>');
    res.write('<ul>');
	console.log(data);
	console.log(files);

    if (Array.isArray(files.images)) {
      files.images.forEach(function(image){
        var kb = image.size / 1024 | 0;
        res.write('<li>uploaded ' + image.name + ' ' + kb + 'kb</li>');
      });
    } else {
      var image = files.images;
      var kb = image.size / 1024 | 0;
      res.write('<li>uploaded ' + image.name + ' ' + kb + 'kb</li>');
    }

    res.end('</ul>');
}

var server = http.createServer(function(req, res) {
	if (req.method == 'GET'){
		return firstPage(res);
	}

	var form = new formidable.IncomingForm;
    var data = {};
    var files = {};

    form.uploadDir = __dirname +'/file';
	form.keepExtensions = true;

	function ondata(name, val, data){
		if (Array.isArray(data[name])) {//数组
			data[name].push(val);
		} else if (data[name]) {//同key
			data[name] = [data[name], val];
		} else {//第一次
			data[name] = val;
		}
	}

	form.on('field', function(name, val){
		ondata(name, val, data);
	});

	form.on('file', function(name, val){
		ondata(name, val, files);
	});
    form.on('end', function() {
		resultPage(res,data,files);	
	});

    form.parse(req);

});
server.listen(8080);

console.log('listening on http://localhost:8080');
__dirname + '/public/form.html，在js当前目录下建立public文件夹，文件夹下建立form.html文件，文件内容如下 

<html>
	<body>
		<form action="/" method="post" enctype="multipart/form-data">
		  <input type="text" name="name" placeholder="Name:" />
		  <input type="file" name="images" multiple="multiple" />
		  <input type="submit" value="Upload" />
		</form>
	</body>
</html>

代码比较简单，formidable部分可以上官网https://github.com/felixge/node-formidable看API。

运行以下看看


在浏览器中打开http://localhost:8080

选择文件，输入文件name

点击upload


后台截图


文件上传成功


再看android代码，布局文件main.xml如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textViewInfo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>
        
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textViewInfo"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="20dp"
        android:text="文件路径" 
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textViewFile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textViewFile"
        android:layout_below="@+id/textViewFile"
        android:layout_marginTop="10dp"
        android:text="上传网址" 
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textViewUrl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_below="@+id/textView3"/>
	
	<WebView 
	    android:id="@+id/webViewResult"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_below="@+id/textViewUrl"
        android:layout_marginTop="30dp"/>
    
    <Button
        android:id="@+id/buttonJava"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="60dp"
        android:text="Java上传" />

    <Button
        android:id="@+id/buttonApache"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/buttonJava"
        android:layout_toRightOf="@+id/buttonJava"
        android:text="Apache上传" />

</RelativeLayout>
主程序代码如下 

package com.zhang.test08_11;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.ProtocolException;
import java.net.URL;
import java.nio.charset.Charset;
import java.util.Random;

import org.apache.http.HttpResponse;
import org.apache.http.ParseException;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.methods.HttpUriRequest;
import org.apache.http.entity.mime.HttpMultipartMode;
import org.apache.http.entity.mime.MultipartEntity;
import org.apache.http.entity.mime.content.FileBody;
import org.apache.http.entity.mime.content.StringBody;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.protocol.HTTP;
import org.apache.http.util.EntityUtils;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;

public class Test08_11Activity extends Activity {
	
	private TextView textViewInfo;
	private TextView textViewFile;
	private TextView textViewUrl;
	private WebView webViewResult;
	private Button buttonJava;
	private Button buttonApache;
	
	private static final String UPLOAD_FILE = "/sdcard/test.jpg";
	private static final String UPLOAD_URL = "http://192.168.9.194:8080/";
	private static final int BUFFER_SIZE = 1024;
	
	//rfc1867协议
	private static final String FIELD_SEP = ": ";
	private static final String CR_LF = "\r\n";
	private static final String TWO_DASHES = "--";
	private static final String BOUNDARY;
	
    /**
     * The pool of ASCII chars to be used for generating a multipart boundary.
     */
    private final static char[] MULTIPART_CHARS =
        "-_1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".toCharArray();
    
	static {
        StringBuilder buffer = new StringBuilder();
        Random rand = new Random();
        int count = rand.nextInt(11) + 30; // a random size from 30 to 40
        for (int i = 0; i < count; i++) {
            buffer.append(MULTIPART_CHARS[rand.nextInt(MULTIPART_CHARS.length)]);
        }
        BOUNDARY =  buffer.toString();
        Log.i("info", BOUNDARY);
	}
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        textViewInfo = (TextView)findViewById(R.id.textViewInfo);
        textViewFile = (TextView)findViewById(R.id.textViewFile);
        textViewUrl = (TextView)findViewById(R.id.textViewUrl);
        webViewResult = (WebView)findViewById(R.id.webViewResult);
        buttonJava = (Button)findViewById(R.id.buttonJava);
        buttonApache = (Button)findViewById(R.id.buttonApache);
        
        textViewFile.setText(UPLOAD_FILE);
        textViewUrl.setText(UPLOAD_URL);
        
        buttonJava.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				javaUpload();
			}
		});
        
        buttonApache.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				apacheUpload();
			}
		});
    }
    
    private void javaUpload(){
    	URL url = null;
    	try {
			url = new URL(UPLOAD_URL);
		} catch (MalformedURLException e) {
		}
		
		HttpURLConnection urlConnection = null;
    	try {
    		urlConnection = (HttpURLConnection) url.openConnection();
		} catch (IOException e) {
			textViewInfo.setText(e.getMessage());
			return;
		}
		try {
			urlConnection.setRequestMethod("POST");
		} catch (ProtocolException e) {
		}
		urlConnection.setDoOutput(true);
		urlConnection.setRequestProperty("Content-Type", "multipart/form-data; boundary="+ BOUNDARY + "; charset=UTF-8");
		
		OutputStream out = null;
		try {
			out = new BufferedOutputStream(urlConnection.getOutputStream());//请求
		} catch (IOException e) {
			urlConnection.disconnect();
			textViewInfo.setText(e.getMessage());
			return;
		}
		
		FileInputStream fStream = null;
		StringBuilder form = new StringBuilder();
		
		form.append(TWO_DASHES + BOUNDARY + CR_LF);
		form.append("Content-Disposition" + FIELD_SEP + "form-data; name=\"name\"" + CR_LF);
		form.append("Content-Type" + FIELD_SEP + "text/plain; charset=UTF-8"+ CR_LF);
		form.append("Content-Transfer-Encoding" + FIELD_SEP + "8bit"+ CR_LF);
		form.append(CR_LF);
		form.append("testImage抓哇");
		form.append(CR_LF);
		
		form.append(TWO_DASHES + BOUNDARY + CR_LF);
		form.append("Content-Disposition" + FIELD_SEP + "form-data; name=\"images\";filename=\"test抓哇.jpg\"" + CR_LF);
		form.append("Content-Type" + FIELD_SEP + "image/jpeg; charset=UTF-8"+ CR_LF);
		form.append("Content-Transfer-Encoding" + FIELD_SEP + "binary"+ CR_LF);
		form.append(CR_LF);
		
		try {
			out.write(form.toString().getBytes("UTF-8"));
			
			fStream = new FileInputStream(UPLOAD_FILE);
			byte[] buffer = new byte[BUFFER_SIZE];
			int length = -1;
			while ((length = fStream.read(buffer)) != -1) {
				out.write(buffer,0,length);
			}
			out.write(CR_LF.getBytes("UTF_8"));
			
			out.write((TWO_DASHES + BOUNDARY + TWO_DASHES + CR_LF).getBytes("UTF-8"));
			out.flush();
		} catch (IOException e) {
			try {
				out.close();
			} catch (IOException e1) {
			}
			urlConnection.disconnect();
			textViewInfo.setText(e.getMessage());
			return;
		} finally {
			try {
				if (fStream != null) {
					fStream.close();
				}
			} catch (IOException e) {
			}
		}
		getResponseJava(urlConnection);
    }
    
    private void apacheUpload(){
    	HttpPost request = new HttpPost(UPLOAD_URL);
    	
        FileBody bin = new FileBody(new File(UPLOAD_FILE),"test阿帕奇.jpg","image/jpeg",HTTP.UTF_8);
        StringBody comment = null;
		try {
			comment = new StringBody("testImage阿帕奇", Charset.forName(HTTP.UTF_8));
		} catch (UnsupportedEncodingException e) {
		}

        MultipartEntity entity = new MultipartEntity(HttpMultipartMode.BROWSER_COMPATIBLE,
        		null, Charset.forName(HTTP.UTF_8));
        entity.addPart("images", bin);
        entity.addPart("name", comment);
        
    	request.setEntity(entity);
    	
    	getResponseApache(request);
    }
    
	private void getResponseJava(HttpURLConnection urlConnection) {
		InputStream in = null;
		try {
			in = new BufferedInputStream(urlConnection.getInputStream());//响应
		} catch (IOException e) {
			urlConnection.disconnect();			
			textViewInfo.setText(e.getMessage());
			return;
		}
		
		BufferedReader reader = null;
		try {
			reader = new BufferedReader(new InputStreamReader(in,"UTF-8"));
		} catch (UnsupportedEncodingException e1) {
		}
		StringBuilder result = new StringBuilder();
		String tmp = null;
		try {
			while((tmp = reader.readLine()) != null){
				result.append(tmp);
			}
		} catch (IOException e) {
			textViewInfo.setText(e.getMessage());
			return;
		} finally {
			try {
				reader.close();
				urlConnection.disconnect();
			} catch (IOException e) {
			}
		}
		
		webViewResult.loadDataWithBaseURL(null, result.toString(), "text/html", "UTF-8", null);
	}
    
	private void getResponseApache(HttpUriRequest request) {
		HttpClient client = new DefaultHttpClient();
    	HttpResponse response = null;
    	try {
			response = client.execute(request);
		} catch (ClientProtocolException e) {
			textViewInfo.setText(e.getMessage());
		} catch (IOException e) {
			textViewInfo.setText(e.getMessage());
		}
		
		if (response == null) {
			return;
		}
		
		String result = null;
		if (response.getStatusLine().getStatusCode() == 200) {
			try {
				result = EntityUtils.toString(response.getEntity(),HTTP.UTF_8);
			} catch (ParseException e) {
				result = e.getMessage();
			} catch (IOException e) {
				result = e.getMessage();
			}
		} else {
			result = "error response" + response.getStatusLine().toString();
		}
		//Log.i("info", result); //不乱码
		//webViewResult.loadData(result, "text/html", "UTF-8"); //乱码
		webViewResult.loadDataWithBaseURL(null, result, "text/html", "UTF-8", null);//不乱码
	}
}
别忘了加权限 

 <uses-permission android:name="android.permission.INTERNET"/>

先看看运行效果



点击java上传


后台输出


文件上传成功



点击Apache上传


后台输出


文件保存成功


运行一切OK。

解释一下代码：

	private static final String UPLOAD_FILE = "/sdcard/test.jpg";
	private static final String UPLOAD_URL = "http://192.168.9.194:8080/";

在sd卡根目录上放上test.jpg文件， node.js+android http请求响应 讲过，不要使用localhost。

代码其它部分主要是要了解http文件上传的协议 RFC1867，http://www.ietf.org/rfc/rfc1867.txt IETF官方介绍，它提供的例子不错

6. Examples

   Suppose the server supplies the following HTML:

     <FORM ACTION="http://server.dom/cgi/handle"
           ENCTYPE="multipart/form-data"
           METHOD=POST>
     What is your name? <INPUT TYPE=TEXT NAME=submitter>
     What files are you sending? <INPUT TYPE=FILE NAME=pics>
     </FORM>

   and the user types "Joe Blow" in the name field, and selects a text
   file "file1.txt" for the answer to 'What files are you sending?'

   The client might send back the following data:

        Content-type: multipart/form-data, boundary=AaB03x

        --AaB03x
        content-disposition: form-data; name="field1"

        Joe Blow
        --AaB03x
        content-disposition: form-data; name="pics"; filename="file1.txt"
        Content-Type: text/plain

         ... contents of file1.txt ...
        --AaB03x--

   If the user also indicated an image file "file2.gif" for the answer
   to 'What files are you sending?', the client might client might send
   back the following data:

        Content-type: multipart/form-data, boundary=AaB03x

        --AaB03x
        content-disposition: form-data; name="field1"

        Joe Blow
        --AaB03x
        content-disposition: form-data; name="pics"
        Content-type: multipart/mixed, boundary=BbC04y

        --BbC04y
        Content-disposition: attachment; filename="file1.txt"

如果看不太懂的话，可以在搜索引擎里找 rfc1867实现。




dellheng
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
NodeJS http Client
夏天不能盖被子
05-14 3182
使用服务器地址作为参数来构造一个HTTP client， 其返回的句柄可用来发出一个或者多个请求。根据连接的服 务器不同， 这个客户端可以 1. 使用管道处理机制来处理请求 2. 每个请求重新构建stream 当前的实现方式并没有用管道处理机制处理请求.Example of connecting to google.com:var http = require('http'); var g
nodejs学习笔记（四）——构造httpserver和httpclient
讨厌走开啦
10-02 9784
nodejs虽然是用javascript这种前台脚本语言来写，但它实质上更接近后台语言，本章就来说明一下如何使用nodejs像后台语言那样来构造一个httpserver和httpclient。 要注意一点：只有在nodejs中我们可以用javacsript来构造httpserver和httpclient，而这也是依赖nodejs的原生http模块来完成的，在一般web应用中的javasc
拥抱Android：编译nodejs搭建移动平台
热门推荐
匆匆往站
12-08 3万+
Android编译系列篇： 1 - Python 2 - NodeJS 3 - Nginx 4 - MariaDB 编译好的版本 android (&gt;6), arm, v8.11.0, v9.11.0:https://github.com/dna2github/dna2oslab/releases 可用的编译脚本支持 v8.12.0 和 v10.10.0 优...
关于HttpURLConnection需要注意的几点
u011558902的专栏
11-13 2871
1.两种方式发送请求 get post get方式  参数放在url后面
node.js+android http请求响应
dellheng的专栏
12-07 4294
本文参照了 http://www.blogjava.net/jelver/articles/143082.html，http://www.blogjava.net/athrunwang/archive/2011/09/28/359680.html，《android SDK开发范例大全(第2版)》 上次做了一个demo，试验如何用node.js响应get post请求，http请求使用的浏览器
node.js+Android http请求响应
灵思致远Leansmall的博客
06-29 789
上次做了一个demo，试验如何用node.js响应get post请求，http请求使用的浏览器。我现在正在学Android，所以决定写一个两者结合的demo。node.js做服务端接收get post请求，android做客户端发送get post请求。 相关阅读： http://www.linuxidc.com/Linux/2012-02/53536.htm 与 http://
node.js+Android http请求响应 分类： Androi...
weixin_30273175的博客
06-29 78
http://www.linuxidc.com/Linux/2012-02/53539.htm 上次做了一个demo，试验如何用node.js响应get post请求，http请求使用的浏览器。我现在正在学Android，所以决定写一个两者结合的demo。node.js做服务端接收get post请求，android做客户端发送get post请求。 相关阅...
android 登录Javaeye(使用HttpURLConnection和HttpClient)
dellheng的专栏
12-12 2532
之前在网上看过好多人用java写登录网站，这次正好学习android，自己写实习一个，就拿经常登录的javaeye(现在叫iteye，已经是csdn的了)试一下。 先来分析javaeye登录界面 查看源文件 账号
node.js connect 实现文件上传
dellheng的专栏
01-05 3140
上次博客node.js+android(使用HttpURLConnection和HttpClient)实现文件上传，使用的是formidable，上篇博客介绍了node.js connect 安装、介绍与实例，那就用connect写一个上传的例子。 主程序代码如下，保存为bodyParser.js，放在敲安装命令的目录下： var connect = require('connect');
Android应用源码之通过Android客户端访问web服务器，实现一个登录功能,服务端+数据库+安卓端.zip
最新发布
06-07
在这个项目中，服务端可能使用Java、Python、Node.js等后端语言实现，搭建了一个API接口来接收和处理来自Android客户端的登录请求。API接口的设计应遵循RESTful原则，提供清晰的URL路径和HTTP动词来表示不同的操作。...
安卓Android源码——android使用JSON进行网络数据交换(服务端、客户端)的实现.zip
10-10
本资料包“安卓Android源码——android使用JSON进行网络数据交换(服务端、客户端)的实现.zip”提供了服务端和客户端使用JSON进行数据交换的实例代码，旨在帮助开发者深入理解和应用这一技术。 首先，我们来理解JSON...
android使用JSON进行网络数据交换(服务端、客户端)的实现.rar
12-16
Android提供了多种方式实现网络请求，如HttpURLConnection、HttpClient（已废弃）、Volley、Retrofit等。其中，Retrofit是一个现代的、类型安全的HTTP客户端，方便地将网络接口转换为可调用的对象，可以轻松处理JSON...
built-client-and-server.zip_android
09-19
在本实例中，可能会使用到HttpURLConnection，这是Android官方推荐的网络请求库，因为它具有更好的性能和更低的内存消耗。 客户端部分通常涉及以下步骤： 1. **创建网络请求**：使用HttpURLConnection或第三方库...
android 横向滑动多屏(开源项目)
dellheng的专栏
12-30 1万+
我们团队项目中需要使用横向滑动多屏的效果，主要是因为看到qq浏览器主界面使用该效果感觉很好。开始采用了ViewFlipper结合手势，可是没有拖拽的效果，后来参照了以下链接开发出来了： 1. 在flipper中如何实现手动拖拽的效果？ 这位和我们一样遇到同样的问题 2. android: how to create different “screens” and nav between th
ExpandableListView 箭头靠右
dellheng的专栏
01-04 1万+
ExpandableListView 默认标示箭头是在左边的，当左边有图片时，不是太好看，想把它放在右边，这么简单的事可我折腾死了，还好给我找到了。 参照了以下链接： expandableListview的默认箭头箭头怎样移到右边  提供的方案是隐藏箭头，完全自己实现 Android中替换ExpandableListView控件前面的箭头图标  讲了怎么换图片，没说怎么换位置 Ho
android MediaPlayer播放InputStream解决方案
dellheng的专栏
02-08 9719
应用中遇到MediaPlayer不支持播放InputStream的问题，在网上找到了几种解决方案。 方案一、临时文件 How do you play Android InputStream on MediaPlayer? Create mediaplayer with inputstream in android Android多媒体开发 android mediaplayer
android通知栏进度条
dellheng的专栏
01-04 8463
项目中需要用到通知栏进度条，查找了好多资料、链接如下： Android 为Notification加上一个进度条 Android实现Service后台下载Notification进度条 Notification使用详解之三：通过服务更新进度通知&在Activity中监听服务进度 android service startService bindService Android中Bi
坑爹啊 横向滑动多屏竟然官方就有
dellheng的专栏
03-28 5849
我当时还兴冲冲的写了这篇博客android 横向滑动多屏(开源项目) 看完这篇博客后 汗颜啊    OSC首发：android中的左右滑屏实现By ViewPager 自己无知啊 小菜鸟啊 滑屏标识（小圆圈 或者 横杠）有开源实现官网 http://viewpagerindicator.com/，使用方法参照http://blog.csdn.net/zuko_yu/article/
Android 使用 HttpURLConnection 上传文件并显示进度条
Android 上传文件到服务端并显示进度条是一种常见的功能，需要使用 HttpURLConnection 类和 AsyncTask 类来实现文件上传，并使用 ProgressBar 组件来显示上传进度条。开发者需要根据自己的需求实现服务端代码，以便...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值