Flex與.NET互操作(十五)：使用FluorineFx中的位元組數組（ByteArray）實作圖檔上傳

前幾天一位朋友問我一個問題，他說：“我用HTTP接口或是WebService接口可以實作圖檔上傳功能，那麼用FluorineFx如何實作圖檔上傳功能呢？”，其實仔細看官方文檔和示例程式的自己都可以找到答案，實作上傳可以有很多種實作，這裡我以官方所提供是示例為基礎稍加改動，通過ByteArray類實作圖檔上傳。

首先建立FluorineFx庫和網站，在遠端伺服器類裡添加一個處理檔案上傳的方法，詳細代碼如下：

namespace ByteStream.Services

{

[RemotingService]

public class ByteStreamService

{

public ByteArray UploadImage(ByteArray ba)

{

MemoryStream ms = new MemoryStream(ba.GetBuffer());

Image img = Bitmap.FromStream(ms);

Bitmap newImage = new Bitmap(img);

MemoryStream tempStream = new MemoryStream();

newImage.Save(tempStream, System.Drawing.Imaging.ImageFormat.Png);

string path = HttpContext.Current.Server.MapPath("UpLoad/ByteArray.png");

FileStream fs = new FileStream(path, FileMode.Create);

tempStream.WriteTo(fs);

fs.Close();

ByteArray result = new ByteArray(tempStream);

return result;

}

處理圖檔上傳的方法通過把flex用戶端傳遞來的位元組數組包裝為記憶體流，然後通過寫檔案的形式将圖檔儲存到指定的目錄下。示例中提供了一個畫圖闆，使用者可以通過選擇顔色自畫不同的圖象，然後儲存到伺服器上指定的目錄。畫圖闆的實作是根據滑鼠按下的移動路線做的，代碼如下：

private function doMouseDown():void

x1 = myCanvas.mouseX;

y1 = myCanvas.mouseY;

isDrawing = true;

private function doMouseMove():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 function doMouseUp():void

isDrawing = false;

//清空畫圖闆

private function onErase(event:MouseEvent):void

myCanvas.graphics.clear();

在官方執行個體中是使用的RemoteObject實作的，這裡我将其修改為通過程式設計實作AMF通信實作當程式初始化的時候就建立與FluorineFx網關的AMF通信連接配接：

private var nc:NetConnection;

private var rs:Responder;

private function init():void

rs = new Responder(onResult,onFault);

nc = new NetConnection();

nc.connect("http://localhost:2453/FluorineFxWeb/Gateway.aspx")

nc.client = this;

在Flex用戶端通過目前網絡連接配接的call()方法實作遠端方法調用，并指定通過Responder來處理伺服器端方法的傳回結果。

private function onSaveImage(event:MouseEvent):void

var bd:BitmapData = new BitmapData(myCanvas.width,myCanvas.height);

bd.draw(myCanvas);

var ba:ByteArray = new PNGEncoder().encode(bd);

nc.call("ByteStream.Services.ByteStreamService.UploadImage",rs,ba);

小提示在進行Flex開發中，能夠通過程式設計實作的最好通過程式設計實作，盡量少的去使用Flex元件，這樣可以有效的給Flex程式瘦身。

伺服器端将傳遞過去的ByteArray資料傳回到了用戶端，用戶端接收到這些資料通過處理将位元組數組轉化為顯示對象後顯示到界面上。

private function onResult(result:ByteArray):void

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);

loader.loadBytes(result);

private function loaderCompleteHandler(event:Event):void

var loader:Loader = (event.target as LoaderInfo).loader;

loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaderCompleteHandler);

var pictureHolder:UIComponent = new UIComponent();

pictureHolder.addChild(loader);

this.resultImage.width = myCanvas.width;

this.resultImage.height = myCanvas.height;

this.resultImage.addChild(pictureHolder);

private function onFault(event:Object):void

{}

到此就完成了圖檔上傳功能，下面是完整的Flex用戶端代碼：

<?xml version="1.0" encoding="utf-8"?>