sudem
sudem
  • 发布:2018-07-08 06:10
  • 更新:2018-07-13 17:19
  • 阅读:3575

Mui 照相机拍照上传的问题

分类:MUI

如题,我想要在照相机拍照后,上传相关的图片到我的 COS 服务器上,以节省服务器资源
上传COS 服务器支持 String \ File\ Blob,这三种类型,可是我始终无法上传 file类型的数据,准确的说,
我不知道应该如何通过img的真实地址,动态的加载成 file类型,下面是我的代码片段,希望各位技术大牛能够帮助解答一下,给个小小的Demo



        var Change_Logo = document.getElementById("Change_Logo");  
        //监听点击事件  
        Change_Logo.addEventListener("tap",function () {  
                mui(this).button('loading');  
                SetImage();  
                 mui(this).button('reset');  
                 mui.toast('修改成功!',{ duration:'long', type:'div' }) ;  

       });  

        //更换头像  
        mui(".mui-table-view-cell").on("tap", "#head", function(e) {  
            if(mui.os.plus)  
            {  
                var a = [{title: "拍照"}, {title: "从手机相册选择"}];  
                plus.nativeUI.actionSheet({cancel: "取消",buttons: a},   
                function(b) {  
                       switch (b.index)   
                       {  
                        case 0:  
                            break;  
                        case 1:  

                            getImage();  
                            break;  
                        case 2:  

                            galleryImg();  
                            break;  
                        default:  
                            break  
                       }  
                })    
            }  

        });  

        function getImage() //从手机拍照  
        {  

            var c = plus.camera.getCamera();  

            c.captureImage(function(e)   
            {  

                plus.io.resolveLocalFileSystemURL(e, function(entry)  
                {  
                   var s = entry.toLocalURL() ;  
                    document.getElementById("head-img1").src = s ;  
                }, function(e) {console.log("读取拍照文件错误:" + e.message);});  

            }, function(s) {console.log("error" + s);},   
            {filename: "_doc/Upload/"+new Date().getTime()+"_head.jpg"})  
        }  

        function galleryImg() {  
            plus.gallery.pick(function(a) {  
                plus.io.resolveLocalFileSystemURL(a, function(entry) {  
                    plus.io.resolveLocalFileSystemURL("_doc/", function(root) {  
                        root.getFile("head.jpg", {}, function(file) {  
                            //文件已存在  
                            file.remove(function() {  
                                console.log("file remove success");  
                                entry.copyTo(root, 'head.jpg', function(e) {  
                                        var e = e.fullPath ;  
                                       console.log(e);  
                                        document.getElementById("head-img1").src = e;  

                                    },  
                                    function(e) {  
                                        console.log('copy image fail:' + e.message);  
                                    });  
                            }, function() {  
                                console.log("delete image fail:" + e.message);  
                            });  
                        }, function() {  
                            //文件不存在  
                            entry.copyTo(root, 'head.jpg', function(e) {  
                                    var path = e.fullPath ;  

                                    document.getElementById("head-img1").src = path;  

                                },  
                                function(e) {  
                                    console.log('copy image fail:' + e.message);  
                                });  
                        });  
                    }, function(e) {  
                        console.log("get _www folder fail");  
                    })  
                }, function(e) {  
                    console.log("读取拍照文件错误:" + e.message);  
                });  
            }, function(a) {}, {  
                filter: "image"  
            })  
        };  

function SetImage()  
{  

    //Ajax 获得CSS系统的授权密钥  
    //注意:此密钥应该定期更换以保证安全  
    // 为确保安全,此密钥共5组,每次进行授权的时候,随机选取一组  

    var src=document.getElementById("head-img1").src;  
    var p=src.lastIndexOf('.');  
    File_Type=src.substr(p);  
    var rand=randomNum(1000,9999);  
    var File_URL='Images/upload/logo/Logo_'+new Date().getTime()+'_'+rand+'.'+File_Type;  
    var data=GetCOSKey();  
    var cos = new COS({ SecretId: data['ID'],SecretKey: data['KEY'],});  

    cos.putObject({  
    Bucket: 'public-cos-szh-12xxxxx219', /* 必须 */  
    Region: 'ap-shanghai',    /* 必须 */  
    Key: File_URL,              /* 必须 */  
    StorageClass: 'STANDARD',  
    Body: src, // 上传文件对象  
    onProgress: function(progressData) {  
        console.log(JSON.stringify(progressData));  
    }  
}, function(err, data) {  
    console.log(JSON.stringify(err) || JSON.stringify(data));  
});  

}    

function randomNum(minNum,maxNum){   
    switch(arguments.length){   
        case 1:   
            return parseInt(Math.random()*minNum+1,10);   
        break;   
        case 2:   
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);   
        break;   
            default:   
                return 0;   
            break;   
    }   
}   

function GetCOSKey()  
{  
//从后端获得签名,这里我用静态代替,用来测试  
    var data=new Array();  
    data['ID']='AxxxxxxxxxxxxxxxxxoAH9mAKruKV';  
    data['KEY']='3qNxxxxxxxxxxxxxxxxxmocCXefS';  
    return data;  

}  
2018-07-08 06:10 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

不要用这样的方式上传,图片以二进制方式上传,也就是把图片转为字符串,直接post这些字符串数据到服务器,服务器把字符串转化为图片即可,这样做的好处是无论图片多大,只把图片控制在一定的大小,比如宽限制1600px,得出的图片基本上在500K以下,用户上传速度也快

sudem

sudem (作者) - 江苏海内 - 桑泽寰

谢谢,这个问题已经解决了,使用canvad读取并重绘图片就可以圆满上传 Blob 类型的文件,楼上的提议是针对绝大部分常规App开发者而言的,可是我们做的是一个小轻型的WebApp,后端使用的是阿里的1核2G内存,1M带宽的学生机,如果使用Post方式发送文件数据,势必造成服务器网络拥塞,所以我的开发思路是后端只返回文本数据,图片数据一律通过Http的方式访问阿里的OSS(腾讯的COS[阿里的文档太复杂了,抱歉,实在看不懂]),尽最大可能减少后端网络,数据处理压力。

该问题目前已经被锁定, 无法添加新回复