Flex与.NET互操作(十五)：使用FluorineFx中的字节数组（ByteArray）实现图片上传

前几天一位朋友问我一个问题，他说：“我用HTTP接口或是WebService接口可以实现图片上传功能，那么用FluorineFx如何实现图片上传功能呢？”，其实仔细看官方文档和示例程序的自己都可以找到答案，实现上传可以有很多种实现，这里我以官方所提供是示例为基础稍加改动，通过ByteArray类实现图片上传。

首先建立FluorineFx库和网站，在远程服务器类里添加一个处理文件上传的方法，详细代码如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> namespace ByteStream.Services
{
[RemotingService]
public class ByteStreamService
{
public ByteArrayUploadImage(ByteArrayba)
{
MemoryStreamms = new MemoryStream(ba.GetBuffer());
Imageimg = Bitmap.FromStream(ms);

BitmapnewImage = new Bitmap(img);

MemoryStreamtempStream = new MemoryStream();
newImage.Save(tempStream,System.Drawing.Imaging.ImageFormat.Png);
string path = HttpContext.Current.Server.MapPath( " UpLoad/ByteArray.png " );
FileStreamfs = new FileStream(path,FileMode.Create);
tempStream.WriteTo(fs);
fs.Close();

ByteArrayresult = new ByteArray(tempStream);
return result;
}
}
}

处理图片上传的方法通过把flex客户端传递来的字节数组包装为内存流，然后通过写文件的形式将图片保存到指定的目录下。示例中提供了一个画图板，用户可以通过选择颜色自画不同的图象，然后保存到服务器上指定的目录。画图板的实现是根据鼠标按下的移动路线做的，代码如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> private functiondoMouseDown(): void
{
x1 = myCanvas.mouseX;
y1 = myCanvas.mouseY;
isDrawing = true ;
}
private functiondoMouseMove(): void
{
x2 = myCanvas.mouseX;
y2 = myCanvas.mouseY;
if (isDrawing)
{
myCanvas.graphics.lineStyle( 2 ,drawColor);
myCanvas.graphics.moveTo(x1,y1);
myCanvas.graphics.lineTo(x2,y2);
x1 = x2;
y1 = y2;
}
}
private functiondoMouseUp(): void
{
isDrawing = false ;
}
// 清空画图板
private functiononErase( event :MouseEvent): void
{
myCanvas.graphics.clear();
}

在官方实例中是使用的RemoteObject实现的，这里我将其修改为通过编程实现AMF通信实现当程序初始化的时候就建立与FluorineFx网关的AMF通信连接：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> private varnc:NetConnection;
private varrs:Responder;
private functioninit(): void
{
rs = new Responder(onResult,onFault);
nc = new NetConnection();
nc.connect( " http://localhost:2453/FluorineFxWeb/Gateway.aspx " )
nc.client = this ;
}

在Flex客户端通过当前网络连接的call()方法实现远程方法调用，并指定通过Responder来处理服务器端方法的返回结果。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> private functiononSaveImage( event :MouseEvent): void
{
varbd:BitmapData = new BitmapData(myCanvas.width,myCanvas.height);
bd.draw(myCanvas);
varba:ByteArray = new PNGEncoder().encode(bd);
nc.call( " ByteStream.Services.ByteStreamService.UploadImage " ,rs,ba);
}

小提示 在进行Flex开发中，能够通过编程实现的最好通过编程实现，尽量少的去使用Flex组件，这样可以有效的给Flex程序瘦身。

服务器端将传递过去的ByteArray数据返回到了客户端，客户端接收到这些数据通过处理将字节数组转化为显示对象后显示到界面上。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> private functiononResult(result:ByteArray): void
{
varloader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
loader.loadBytes(result);
}
private functionloaderCompleteHandler( event :Event): void
{
varloader:Loader = ( event .target as LoaderInfo).loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaderCompleteHandler);
varpictureHolder:UIComponent = new UIComponent();
pictureHolder.addChild(loader);
this .resultImage.width = myCanvas.width;
this .resultImage.height = myCanvas.height;
this .resultImage.addChild(pictureHolder);
}

private functiononFault( event :Object): void
{}

到此就完成了图片上传功能，下面是完整的Flex客户端代码：

Flex端完整代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"fontSize="12"creationComplete="init()">
<mx:Script>
<![CDATA[
importmx.core.UIComponent;
importmx.controls.Alert;
importmx.events.ResizeEvent;
importmx.graphics.codec.PNGEncoder;
importmx.rpc.events.FaultEvent;
importmx.rpc.events.ResultEvent;

privatevarisDrawing:Boolean=false;
privatevarx1:int;
privatevary1:int;
privatevarx2:int;
privatevary2:int;
privatevardrawColor:uint;

privatevarnc:NetConnection;
privatevarrs:Responder;
privatefunctioninit():void
{
rs=newResponder(onResult,onFault);
nc=newNetConnection();
nc.connect("http://localhost:2453/FluorineFxWeb/Gateway.aspx")
nc.client=this;
}

privatefunctiononSaveImage(event:MouseEvent):void
{
varbd:BitmapData=newBitmapData(myCanvas.width,myCanvas.height);
bd.draw(myCanvas);
varba:ByteArray=newPNGEncoder().encode(bd);
nc.call("ByteStream.Services.ByteStreamService.UploadImage",rs,ba);
}

privatefunctiononResult(result:ByteArray):void
{
varloader:Loader=newLoader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
loader.loadBytes(result);
}
privatefunctionloaderCompleteHandler(event:Event):void
{
varloader:Loader=(event.targetasLoaderInfo).loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaderCompleteHandler);
varpictureHolder:UIComponent=newUIComponent();
pictureHolder.addChild(loader);
this.resultImage.width=myCanvas.width;
this.resultImage.height=myCanvas.height;
this.resultImage.addChild(pictureHolder);
}

privatefunctiononFault(event:Object):void
{}

privatefunctiondoMouseDown():void
{
x1=myCanvas.mouseX;
y1=myCanvas.mouseY;
isDrawing=true;
}
privatefunctiondoMouseMove():void
{
x2=myCanvas.mouseX;
y2=myCanvas.mouseY;
if(isDrawing)
{
myCanvas.graphics.lineStyle(2,drawColor);
myCanvas.graphics.moveTo(x1,y1);
myCanvas.graphics.lineTo(x2,y2);
x1=x2;
y1=y2;
}
}
privatefunctiondoMouseUp():void
{
isDrawing=false;
}
//清空画图板
privatefunctiononErase(event:MouseEvent):void
{
myCanvas.graphics.clear();
}
]]>
</mx:Script>

<mx:Panelx="10"y="10"width="348"height="306"layout="absolute">
<mx:Canvasx="10"y="10"width="315"height="210"id="myCanvas"
mouseDown="doMouseDown()"
mouseMove="doMouseMove()"
mouseUp="doMouseUp()">
</mx:Canvas>
<mx:ControlBar>
<mx:ColorPickerchange="drawColor=event.target.selectedColor"/>
<mx:Buttonlabel="清除"click="onErase(event)"/>
<mx:Buttonlabel="保存"click="onSaveImage(event)"/>
</mx:ControlBar>
</mx:Panel>
<mx:Imagex="382"y="10"id="resultImage"/>
</mx:Application>

本文示例程序下载：ByteStreamDemo.rar