NodeJS保存 Egret上传图片base64 的方案

这两天研究了Egret中上传图片的方案，服务端使用nodeJS

使用需求：
在前端选择图片，
然后获得这个图片的base64数据，
然后上传给服务器，
服务器保存为图片

现在的现象：
在前端选择图片，通过
然后获得这个图片的base64数据，通过
然后上传给服务器，通过
服务器保存为图片，通过

原来的问题是：保存之后的图片提示损坏经过朋友们的帮助，问题解决了，解决方案如下




解决方案：
================================================
感谢  昱少弋，提供给我的方法，“把base64字符串拷贝到地址栏，查看图片是否正常“，这个方法真的很好用，
在用这个方法之后，经过比较文本内容，发现了//使用express接收POST值后，base64编码字符串中的“+”号被替换成空格, 需要给替换回去
这个得益于xsstomy提供给我的信息，感谢他帮我查找问题 他提供的https://cnodejs.org/topic/4f939c84407edba2143c12f7 中有关于express会替换base64内容中+号的描述

本帖中的后端代码目前可以工作了，关键之处就是被标红色的地方
附件中的响应代码位置也替换成红色的就可以了
================================================


前端
Egret 3.0.0
Wing 2.5.1
后端
node 0.10.28
express 3.5.3

附件是前后端代码，请帮助查看，后端代码分为3子包
前端 uploadImgBase64.zip (568.33 KB, 下载次数: 149)

2016-1-4 14:40 上传

点击文件名下载附件
前端源码
后端子包1 nodeServer.part1.rar (3 MB, 下载次数: 29)

2016-1-4 14:44 上传

点击文件名下载附件
后端源码
后端子包2 nodeServer.part2.rar (3 MB, 下载次数: 23)

2016-1-4 14:44 上传

点击文件名下载附件
后端源码
后端子包3 nodeServer.part3.rar (1.49 MB, 下载次数: 17)

2016-1-4 14:44 上传

点击文件名下载附件
后端源码

相关参考文档
https://cnodejs.org/topic/4f939c84407edba2143c12f7 （xsstomy提供）
http://bbs.egret.com/forum.php?mod=viewthread&tid=2775&highlight=base64%2B%E4%B8%8A%E4%BC%A0  可以上传base64
http://bbs.egret.com/forum.php?mod=viewthread&tid=7383 如何选择照片

前端代码片段
[mw_shl_code=actionscript3,true]/**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene(): void {
        var stageW: number = this.stage.stageWidth;
        var stageH: number = this.stage.stageHeight;
        this.icon = jbP2.DispUtil.createTouchTf(10,10,100,20,"start");
        this.addChild(this.icon);
        this.icon.addEventListener(egret.TouchEvent.TOUCH_TAP,this.doSelect,this);
    }
    private doSelect(evt: egret.TouchEvent): void {
        if(isWeixin())
            selectImageWX(this.selectedHandler,this);
        else
            selectImage(this.selectedHandler,this);
    }
    private selectedHandler(thisRef: any,imgURL: string,file: Blob): void {
        //alert("img selected"+imgURL);
        RES.getResByUrl(imgURL,thisRef.compFunc,thisRef,RES.ResourceItem.TYPE_IMAGE);
        //getImageData(file,thisRef.bytesHandler,thisRef);
    }
    private bytesHandler(thisRef: any,imgBytes: ArrayBuffer): void {
        console.log("大图数据:" + imgBytes);
    }
    private compFunc(texture: egret.Texture): void {
        //alert("compFunc"+texture);
        var imgReview: egret.Bitmap = new egret.Bitmap(texture);
        imgReview.touchEnabled = true;
        imgReview.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.removeImgReview,this);
        this.addChild(imgReview);
        
        this.uploadImgByTexture(texture);
    }
    private removeImgReview(evt: egret.TouchEvent): void {
        var imgReview: egret.Bitmap = evt.currentTarget;
        this.removeChild(imgReview);
    }
        
        /**
     * 根据texture获得base64数据上传给服务器
     * @param texture
     */
    private uploadImgByTexture(texture: egret.Texture) {
        console.log('texture.wid:' + texture.textureWidth + ",hei:" + texture.textureHeight);
        
        //---------------------------------------------------------------------------------------------------------------------------------------
        //第二个参数就是你所希望截取的区域了，默认为texture整个大小
        //var base64Str = texture.toDataURL("image/png",new egret.Rectangle(0,0,texture.textureWidth,texture.textureHeight));
        var base64Str = texture.toDataURL("image/jpeg");//使用默认texture尺寸
        
        //测试正则表达式替换,只是为了测试-------------------------------------------------------------
        //var subStr = base64Str.substr(0,50);
        //var subStr = 'data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD';
        //var replStr = subStr.replace(/^data:image\/\w+;base64,/,"");
        //console.log('subStr:' + subStr);
        //console.log('replStr:' + replStr);
        //base64Str = base64Str.replace(/^data:image\/\w+;base64,/,"");//测试前端直接过滤字符
        //-----------------------------------------------------------------------------------------
        
        this.uploadData(base64Str);
        //---------------------------------------------------------------------------------------------------------------------------------------
    }


    /**
     * 把base64上传给服务器
     * @param base64Str 图片的base64数据
     */
    private uploadData(base64Str) {
      
        //格式 key0=value0&key1=value1,多个变量用&连接
        var httpVarsStr = "name=jarbowPic&imgData=" + base64Str;

        var request = new egret.HttpRequest();
        request.responseType = egret.HttpResponseType.TEXT;
        request.open("http://localhost:4000/egretUpload",egret.HttpMethod.POST);
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(httpVarsStr);//发送post参数
        request.addEventListener(egret.Event.COMPLETE,this.onDataComplete,this);
        request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onPostIOError,this);
        request.addEventListener(egret.ProgressEvent.PROGRESS,this.onPostProgress,this);
    }

    private onDataComplete(event: egret.Event) {
        var request = <egret.HttpRequest>event.currentTarget;
        var response: string = String(request.response);
        console.log("onDataComplete data : " + response);//
    }
    private onPostIOError(event: egret.IOErrorEvent): void {
        console.log("post error : " + event);
    }
    private onPostProgress(event: egret.ProgressEvent): void {
        console.log("post progress : " + Math.floor(100 * event.bytesLoaded / event.bytesTotal) + "%");
    }[/mw_shl_code]

服务端代码
exports.egretUploadImg = function(req,res){
        //如下是设置跨域部分----------------------------------------------------------------------------------------------------------
        res.header("Access-Control-Allow-Origin", "*");    //设置跨域访问,这个必须有，不然会加载不到数据，通过js控制台可以看到错误
        //res.header("Access-Control-Allow-Origin", "http://192.168.0.101:3001");//设置目标域可以访问,要加端口号才生效
        //----------------------------------------------------------------------------------------------------------------------------
       
        //接收前台POST过来的base64
        var name = req.body.name;
        var imgData = req.body.imgData;
       
        //使用express接收POST值后，base64编码字符串中的“+”号被替换成空格,需要给替换回去
        imgData = imgData.replace(/\s/g,"+");//把空格替换回+号
       
        console.log('egretUploadImg name:'+name);
        //console.log('imgData:'+imgData);
       
        //var subStr = imgData.substr(0,25);
        //console.log('imgData.subStr:'+subStr);//测试输出原始的内容中包含 data:image/png;base64,
       
        //过滤data:URL
        var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
       
        //subStr = base64Data.substr(0,25);
        //console.log('base64Data.subStr:'+subStr);//测试替换之后的内容不包含 data:image/png;base64,
       
       
       
        var dataBuffer = new Buffer(base64Data, 'base64');
        var fs = require('fs');
        fs.writeFile("egretUpload.jpg", dataBuffer, function(err) {
                if(err){
                  res.send(err);
                }else{
                  res.send("保存成功！");
                }
        });
}



这个可以工作了！

AirMonkeyStudio 发表于 2016-1-4 21:19
ok，继续测一下

前台传递的base64和后端获取到的是一样的吗，好像可以把base64的字符串直接粘贴到浏览器地址栏上，看能不能出现正确的图片

这个看你描述的信息是服务端的问题，这个应该找nodejs论坛回答一下或者找nodejs高手回答一下。这里的nodejs会的用户，可能不多。帮你查询一下问题。https://cnodejs.org/topic/4f939c84407edba2143c12f7

xsstomy 发表于 2016-1-4 17:41
这个看你描述的信息是服务端的问题，这个应该找nodejs论坛回答一下或者找nodejs高手回答一下。这里的nodejs ...

十分感谢xsstomy的回复
我使用的代码和这段是类似的，我再研究研究，听你的建议，到node论坛也问问

xsstomy 发表于 2016-1-4 17:41
这个看你描述的信息是服务端的问题，这个应该找nodejs论坛回答一下或者找nodejs高手回答一下。这里的nodejs ...

使用这个 https://cnodejs.org/topic/4f939c84407edba2143c12f7 来测试之后，结果还是说文件损毁之类的，我之前看的一些资料也是差不多的处理，所以现在想能不能是Egret前端传过去的base64有问题，这个不知怎么确定？

AirMonkeyStudio 发表于 2016-1-4 20:22
使用这个 https://cnodejs.org/topic/4f939c84407edba2143c12f7 来测试之后，结果还是说文件损毁之类的， ...

那你看看输出，前后的base64是否是一致的

xsstomy 发表于 2016-1-4 20:57
那你看看输出，前后的base64是否是一致的

ok，继续测一下

还是没有成功，有么有人遇到我一样的问题？
有图片上传不上去

昱少弋 发表于 2016-1-5 13:21
前台传递的base64和后端获取到的是一样的吗，好像可以把base64的字符串直接粘贴到浏览器地址栏上，看能不 ...

十分感谢回复，
把字符串黏贴到地址栏果然可以看到图片，base64竟然可以这么玩儿，我按照这个继续试试去

昱少弋 发表于 2016-1-5 13:21
前台传递的base64和后端获取到的是一样的吗，好像可以把base64的字符串直接粘贴到浏览器地址栏上，看能不 ...

按照你这个方法我反复测试了下
一直调到base64可以打印到浏览器上，就保存，结果图片就可以了
很感谢
xsstomy提供的信息也非常重要，之前因为看base64一大堆字符,就懒了去做个文件比较的工作，确实前后端base64是不一样的，很感谢xsstomy帮助提供的信息