mui+vue uploader客戶端圖片直傳oos

JavaScript · 發表 2018-11-29 18:24:21

摘要：前段時間公司要求做一個客戶端圖片直傳oos的功能，要做到拍照和相簿上傳，要滿足ios和Android端。作為一個剛入門vue和mui的前端菜鳥，在度娘上找了很久資源，終於搗鼓出來了。還是記錄一份，方便查閱。 1、在oos上申請註冊一個賬號，得到對應的OSSAccessKeyId、Acces...

前段時間公司要求做一個客戶端圖片直傳oos的功能，要做到拍照和相簿上傳，要滿足ios和Android端。作為一個剛入門vue和mui的前端菜鳥，在度娘上找了很久資源，終於搗鼓出來了。還是記錄一份，方便查閱。

1、在oos上申請註冊一個賬號，得到對應的OSSAccessKeyId、AccessKeySecret等

點選進入控制檯

點選進入物件儲存

新建bucket

獲取bucket域名

點選右上角頭像新建或檢視已有的accesskeys

獲取對應的id和secret

2、準備工作好了之後就可以開始用到自己的專案中了

html部分只需要留一個img用於展現圖片和一個點選事件就好

```

```

js部分

```

var server = "http://lctx.oss-cn-beijing.aliyuncs.com/"; //申請到的阿里雲OSS地址

var OSSAccessKeyId= "LTAIC0Yv1Jbu5x7v"; //申請到的阿里雲AccessKeyId和AccessKeySecret

var AccessKeySecret= "1OSGmCsAhh6Dwe9ZRQzc54wIDZskdk";//需要用自己申請的進行替換

var fname = ""; //表示檔名，例如 XXXX.jpg;

var dir ="uploads/headimg/"; //指定上傳目錄，此處指定上傳到app目錄下

var upImgPath = '';//上傳圖片名稱儲存

$('#headimage').on('tap',function(){//點選頭像後的處理函式

showActionSheet();

})

function showImgDetail (src) {

$('#headimage').attr('src',src)

}

function plusReady() {

//Android返回鍵監聽事件

plus.key.addEventListener('backbutton',function(){

myclose();

},false);

}

if (window.plus) {

plusReady();

} else {

document.addEventListener('plusready', plusReady, false);

}

var divid = 1;

var files = [];

//選取圖片的來源，拍照和相簿

function showActionSheet(conf){

var divid = 1;

var actionbuttons=[{title:"拍照"},{title:"相簿選取"}];

var actionstyle={title:"選擇照片",cancel:"取消",buttons:actionbuttons};

plus.nativeUI.actionSheet(actionstyle, function(e){

if(e.index==1){

getImage(divid);

}else if(e.index==2){

galleryImg(divid);

}

});

}

//相簿選取圖片

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"

});

}

// 拍照

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

});

}

index = 1;

function appendFile(p) {

// files = [];

files.push({

name: "uploadkey"+ index,//+ index,//這個值伺服器會用到，作為file的key

path: p

});

index++;

}

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:10,//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;

upImgPath = my_uid+'_' + myDate + suffix1;

saveimage(event.target,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("."));//圖片名稱：1467602809090

var itemname="img-"+divid;//429img-F_ZDDZ

var itemvalue=plus.storage.getItem(itemname);

if(itemvalue==null){

itemvalue="{"+name+","+path+","+url+"}";//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}

}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 wt = plus.nativeUI.showWaiting("載入中...");

var task = plus.uploader.createUpload(server, {

method: "POST"

function(t, status) { //上傳完成

console.log("t" + JSON.stringify(t));

console.log("status " + status);

if(status == 200) {

uploadPath(function(data){

wt.close();

if(data == 'ok'){

console.log("上傳成功：" + t.responseText);

localStorage.setItem('my_headimg',data_headimg);

showImgDetail(data_headimg);

mui.toast('上傳成功');

}

else{

mui.toast('上傳失敗');

}

})

//插入本地資料庫

} else {

// outLine("上傳失敗：" + status);

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];

console.log("準備上傳的圖片路徑："+f.path);

console.log("準備上傳的圖片name："+f.name);

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;

}

function uploadPath(callback){

var getUrl = url + 'api/user/head1';

var my_uid = parseInt( localStorage.getItem('uid'));

var data = {

uid:my_uid,

head:upImgPath

}

postDate(getUrl,data,'POST',function(data){

if(data.code == 200){

callback('ok');

}

})

}

mui+vue uploader客戶端圖片直傳oos

您可能也會喜歡…