做好前序工作
在oos上申请注册一个账号,得到对应的OSSAccessKeyId、AccessKeySecret等
以上基础步骤做好了,就可以开始我们的项目了
html部分
html部分只需要留一个img用于展现图片和一个点击事件就好
<img class="me_headerImg" id="headimage" :src="me_headerImg" onerror="this.src='../images/headImg.png'"/>
<!-- onerror="this.src='../images/headImg.png'"是为img设置一张当img图片加载不出来或者出错后显示的默认图片-->
js部分
//上传图片要用到的js,不要偷懒,都要用
<script type="text/javascript" src="../lib/js/crypto.js"></script>
<script type="text/javascript" src="../lib/js/hmac.js"></script>
<script type="text/javascript" src="../lib/js/base64.js"></script>
<script type="text/javascript" src="../lib/js/sha1.js"></script>
var server = "http://text.oss-cn-beijing.aliyuncs.com/"; //申请到的阿里云OSS地址
var OSSAccessKeyId= "LTAIC0Yxxxxxxxxxv"; //申请到的阿里云AccessKeyId和AccessKeySecret
var AccessKeySecret= "1OSGmCsAhh6xxxxxxxxxxxxxDZskdk";//需要用自己申请的进行替换
var fname = ""; //表示文件名,例如 XXXX.jpg;
var dir ="uploads/headimg/"; //指定上传目录,此处指定上传到uploads/headimg目录下
var upImgPath = '';//上传图片名称存储
$('#headimage').on('tap',function(){//点击头像后的处理函数
showActionSheet();
})
function showImgDetail (src) {//显示图片的处理函数
$('#headimage').attr('src',src)
}
var files = []; //定义图片选择后存储的地址和文件名
function plusReady() {
//Android返回键监听事件
plus.key.addEventListener('backbutton',function(){
myclose();
},false);
}
if (window.plus) { //使用mui的拍照和相册需要在plus内部
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
var divid = 1;
//选取图片的来源,拍照和相册
function showActionSheet(conf){
var actionbuttons=[{title:"拍照"},{title:"相册选取"}];
var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet(actionstyle, function(e){
if(e.index==1){
getImage();
}else if(e.index==2){
galleryImg();
}
});
}
//相册选取图片
function galleryImg() {
plus.gallery.pick( function(p){
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name); //压缩图片
}, function(e) {
plus.nativeUI.toast("读取相册文件错误:" + e.message);
});
}, function ( e ) {
}, {
filename: "_doc/camera/",
filter:"image"
});
}
index = 1;
function appendFile(p) {
files.push({
name: "uploadkey"+ index, //这个值服务器会用到,作为file的key ,可以配合后台自己定义
path: p
});
index++;
}
// 拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误:" + e.message);
});
}, function(e) {
}, {
filename: "_doc/camera/",
index: 1
});
}
var suffix1 ;//获取文件后缀名
var myDate ;//获取当前时间
var keyname ;//路径及文件名
var pic_path ;
var my_filename = '' ;
//压缩图片
function compressImage(url,filename){ //压缩图片(此处为原图)
pic_path = url ;
my_filename = filename;
name="_doc/upload/"+divid+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
fname = filename;
suffix1 = get_suffix(fname); //文件后缀 例如 .jpg
myDate = Math.round(new Date().getTime()/1000).toString();
plus.zip.compressImage({
quality:100,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
src:url,//src: (String 类型 )压缩转换原始图片的路径
dst:name,//压缩转换目标图片的路径
overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件 ,
},
function(event) {
var path = name;//压缩转换目标图片的路径
keyname =dir + my_uid+'_' + myDate + suffix1;
saveimage(event.target,filename,path);
},function(error) {
plus.nativeUI.toast("压缩图片失败,请稍候再试");
});
}
//压缩图片
function compressImage2(){ //压缩图片(此处为取10的压缩图),由于需求,所以做了一张原图一张压缩图,方便前段调用显示。优化加载速度
divid = divid*1 + 1;
var name="_doc/upload/"+divid+my_filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
console.log(name)
plus.zip.compressImage({
src:pic_path,//src: (String 类型 )压缩转换原始图片的路径
dst:name,//压缩转换目标图片的路径
quality:10,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件 ,
},
function(event) {
var path = name;//压缩转换目标图片的路径
keyname =dir + "thumb_" + my_uid +'_' + myDate + suffix1;
saveimage(event.target,my_filename,path);
},function(error) {
plus.nativeUI.toast("压缩图片失败,请稍候再试");
});
}
//保存信息到本地
function saveimage(url,name,path){
console.log(path)
appendFile(path);
var state=0;
var wt = plus.nativeUI.showWaiting("加载中...");
namename=name.substring(0,name.indexOf("."));
var itemname="img-"+divid;
var itemvalue=plus.storage.getItem(itemname);
if(itemvalue==null){
itemvalue="{"+name+","+path+","+url+"}"
}else{
itemvalueitemvalue=itemvalue+"{"+name+","+path+","+url+"}";
}
plus.storage.setItem(itemname, itemvalue);
upload(url);
wt.close();
}
// 阿里云参数设置,用于计算签名signature
var policyText = {
"expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText));
var message = policyBase64;
var bytes = Crypto.HMAC(Crypto.SHA1, message, AccessKeySecret, {
asBytes: true
});
var signature = Crypto.util.bytesToBase64(bytes);
// 上传文件
function upload(data_headimg) {
var wt = plus.nativeUI.showWaiting("加载中...");//设置加载中动画
var task = plus.uploader.createUpload(server, {
method: "POST"
},
function(t, status) { //上传完成
if(status == 200) {
console.log("上传成功:" + t.responseText);
if(divid == 1){
imgHref = my_uid +'_' + myDate + suffix1;//此处把上传成功的当前图片文件名复制给imgHref,方便在后来把文件名告诉自己的服务器知道。好让oos和自己服务器数据连接
compressImage2();//原图上传成功之后再吊起上传一次压缩图
}
else{
divid = 1;
showImgDetail(data_headimg);//当两张图都上传成功后,显示出当前图片到页面
mui.toast('上传成功');
}
wt.close();
} else {
wt.close();
}
}
);
//按照之前说明的参数类型,按顺序添加参数
task.addData("key", keyname);
task.addData("policy", policyBase64);
task.addData("OSSAccessKeyId", OSSAccessKeyId);
task.addData("success_action_status", "200");
task.addData("signature", signature);
console.log("files[0]" + JSON.stringify(files[0]));
for (var i = 0; i < files.length; i++) {
var f = files[i];
task.addFile(f.path, {
key: "file",
name: "file",
mime: "image/jpeg"
});
}
task.start();
}
//得到文件名的后缀
function get_suffix(filename) {
var pos = filename.lastIndexOf('.');
var suffix = '';
if(pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
最后把已获得的oos图片名传给自己服务器的步骤就按正常流程就好了。
至此,使用uploader上传图片到oos已经成功了