前端圖片直傳OSS試驗(yàn)

desdik 發(fā)布于2019-06-27 14:18 / 2718人閱讀

摘要：當(dāng)時的方案是前端先調(diào)用微信的選擇圖片并上傳，然后再從后端下載到服務(wù)器上。如果其值未設(shè)置或者設(shè)置成一個非法值，返回一個空文檔和狀態(tài)碼。所以，之前返回不正常的這個問題，只要強(qiáng)行指定返回狀態(tài)碼，就可以正常收到返回的了并且也沒有先前報(bào)錯的問題了。

前段時間參與了一個H5項(xiàng)目，里邊有個需求是用戶上傳圖片。當(dāng)時的方案是前端先調(diào)用微信的JSSDK選擇圖片并上傳，然后再從后端下載到服務(wù)器上。然而用的時候發(fā)現(xiàn)客戶端給的圖片有大有小，但是由于用了微信的接口，圖片在下載之前是沒法控制的。后來在想能不能調(diào)用HTML5原生的文件上傳接口，另外還可以配合阿里云的OSS對圖片做進(jìn)一步處理，所以就有了這篇文章。

1. HTML5原生上傳

其實(shí)之前也有想過用原生的，可手里的項(xiàng)目全是微信平臺的H5，原生上傳一直被告知有兼容性問題，所以這個方案一直是被擱置的；只是這次覺得用微信接口實(shí)在不爽才重新翻出來的，沒想到意外發(fā)現(xiàn)手里的米4居然可以正常用。。好了閑話不說，上代碼：

HTML部分主要就是那個input，至于下邊那個div，主要是留著放圖片預(yù)覽用的。

文件填入FormData，然后POST上傳，后端（用的PHP）簡單寫下接收就行。
(然后這里順便想問下如果直接上傳blob的話，PHP后端應(yīng)該怎么寫？有大神路過請不吝賜教~小弟這里先謝過了）


然后處理下權(quán)限啥的，就能跑啦。
2. 前端壓縮（localResizeIMG）
localResizeIMG 是個好插件，用法也很簡單，把 GitHub 里的 dist 文件夾拖下來改個名（我改了個“l(fā)ocalRZ”），然后直接引用 lrz.bundle.js 文件就行了：



localResizeIMG 的 文檔 寫的挺清楚的，哪里不明白的話可以過去看看。
3. 美化上傳按鈕
原生的文件上傳控件略丑，所以一般是要美化一下。
HTML：

    
    上傳圖片



放一個 lable 上去，然后隱藏掉原有的 input：

這樣看起來就舒服多了。
4. 對接OSS
關(guān)于直傳，阿里官方給了三種方案：

客戶端 JavaScript 簽名后直傳；

客戶端申請服務(wù)端簽名，然后打包上傳；

客戶端申請服務(wù)端簽名，打包上傳OSS后回調(diào)服務(wù)端。


這里主要用的是第二種。
根據(jù)官方給的案例代碼，首先要搞個簽名用的PHP：
format(DateTime::ISO8601);
    $pos = strpos($expiration, "+");
    $expiration = substr($expiration, 0, $pos);
    return $expiration."Z";
}

//自行設(shè)置AccessKey和相應(yīng)Bucket的外網(wǎng)域名
$id= "xxxxxxxxxxx";
$key= "yyyyyyyyyy";
$host = "http://zzzzzzz.oss-cn-xxxxxxxxx.aliyuncs.com/";

$now = time();
$expire = 10; //設(shè)置該policy超時時間是10s. 即這個policy過了這個有效時間，將不能訪問
$end = $now + $expire;
$expiration = gmt_iso8601($end);

//文件大小范圍.用戶可以自己設(shè)置
$condition = array(0=>"content-length-range", 1=>0, 2=>1048576000);

//設(shè)置用戶上傳指定的前綴
$dir = "test/";
//用戶上傳數(shù)據(jù)的位置匹配,這一步不是必須項(xiàng),只是為了安全起見,防止用戶通過policy上傳到別人的目錄
$start = array(0=>"starts-with", 1=>"$key", 2=>$dir);

//設(shè)置bucket
$bucket = array(0=>"eq", 1=>"$bucket", 2=>"gmei");

$conditions = array(0=>$bucket, 1=>$condition, 2=>$start);


$arr = array("expiration"=>$expiration,"conditions"=>$conditions);
//echo json_encode($arr);
//return;
$policy = json_encode($arr);
$base64_policy = base64_encode($policy);
$signature = base64_encode(hash_hmac("sha1", $base64_policy, $key, true));

$response = array(
    "accessid" => $id,
    "host" => $host,
    "policy" => $base64_policy,
    "signature" => $signature,
    "expire" => $end,
    "dir" => $dir."${filename}"
);

echo json_encode($response);
里邊的東西填一下，然后保存在同目錄下就行。然后改下HTML：



5. 遺留問題

OSS返回給客戶端的XML沒法正常解析

返回的XML是報(bào)錯內(nèi)容，但是不影響文件的正常上傳（文件上傳返回的是默認(rèn)的204）。報(bào)錯內(nèi)容是（大意）“[AccessDenied]：The bucket you visit is not belong to you.”，查了下文檔說原因是“子用戶沒有Bucket管理的權(quán)限(如getBucketAcl CreateBucket、deleteBucket setBucketReferer、 getBucketReferer等)”，調(diào)了半天的 RAM（訪問控制）也沒弄好，不知道是什么原因~


6. 2016/8/31 補(bǔ)遺：
上次留下幾個問題，已經(jīng)解決了，所以過來填坑。
其實(shí)這兩個問題算是一個問題，在 PostObject 文檔里，表單域里有個參數(shù)“success_action_status”，描述是“未指定success_action_redirect表單域時，該表單域指定了上傳成功后返回給客戶端的狀態(tài)碼。 接受值為200, 201, 204（默認(rèn)）。 如果該域的值為200或者204，OSS返回一個空文檔和相應(yīng)的狀態(tài)碼。 如果該域的值設(shè)置為201，OSS返回一個XML文件和201狀態(tài)碼。 如果其值未設(shè)置或者設(shè)置成一個非法值，OSS返回一個空文檔和204狀態(tài)碼。”所以，之前返回不正常的這個問題，只要強(qiáng)行指定返回201狀態(tài)碼，就可以正常收到返回的XML了（并且也沒有先前報(bào)錯的問題了）。
上代碼：



最后總結(jié)了下，HTTP 一定要學(xué)好啊！！（于是哭著滾去看書了……）

【參考資料】

jQuery手冊 - AJAX函數(shù)

理解DOMString、Document、FormData、Blob、File、ArrayBuffer數(shù)據(jù)類型

對象存儲OSS - Web端直傳實(shí)踐：采用服務(wù)端簽名后直傳

對象存儲OSS - API手冊 - Post Object

對象存儲OSS - API手冊 - PostObject錯誤及排查

對象存儲OSS - OSS控制臺客戶端Windows版