oos客户端图片直传（builder + mui + vue）

做好前序工作

在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已经成功了