如题,我想要在照相机拍照后,上传相关的图片到我的 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;
}
2 个回复
1***@qq.com
不要用这样的方式上传,图片以二进制方式上传,也就是把图片转为字符串,直接post这些字符串数据到服务器,服务器把字符串转化为图片即可,这样做的好处是无论图片多大,只把图片控制在一定的大小,比如宽限制1600px,得出的图片基本上在500K以下,用户上传速度也快
sudem (作者) - 江苏海内 - 桑泽寰
谢谢,这个问题已经解决了,使用canvad读取并重绘图片就可以圆满上传 Blob 类型的文件,楼上的提议是针对绝大部分常规App开发者而言的,可是我们做的是一个小轻型的WebApp,后端使用的是阿里的1核2G内存,1M带宽的学生机,如果使用Post方式发送文件数据,势必造成服务器网络拥塞,所以我的开发思路是后端只返回文本数据,图片数据一律通过Http的方式访问阿里的OSS(腾讯的COS[阿里的文档太复杂了,抱歉,实在看不懂]),尽最大可能减少后端网络,数据处理压力。