前端圖片直傳OSS試驗

desdik 發布于2019-06-27 14:18 / 2732人閱讀

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

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

1. HTML5原生上傳

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

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

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


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



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

    
    上傳圖片



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

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

客戶端 JavaScript 簽名后直傳；

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

客戶端申請服務端簽名，打包上傳OSS后回調服務端。


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

//自行設置AccessKey和相應Bucket的外網域名
$id= "xxxxxxxxxxx";
$key= "yyyyyyyyyy";
$host = "http://zzzzzzz.oss-cn-xxxxxxxxx.aliyuncs.com/";

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

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

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

//設置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是報錯內容，但是不影響文件的正常上傳（文件上傳返回的是默認的204）。報錯內容是（大意）“[AccessDenied]：The bucket you visit is not belong to you.”，查了下文檔說原因是“子用戶沒有Bucket管理的權限(如getBucketAcl CreateBucket、deleteBucket setBucketReferer、 getBucketReferer等)”，調了半天的 RAM（訪問控制）也沒弄好，不知道是什么原因~


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



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

【參考資料】

jQuery手冊 - AJAX函數

理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型

對象存儲OSS - Web端直傳實踐：采用服務端簽名后直傳

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

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

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

GPU云服務器云服務器 oss直傳圖片水印 oss 圖片上傳oss oss圖片存儲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/21922.html

前端圖片直傳OSS試驗

摘要：當時的方案是前端先調用微信的選擇圖片并上傳，然后再從后端下載到服務器上。如果其值未設置或者設置成一個非法值，返回一個空文檔和狀態碼。所以，之前返回不正常的這個問題，只要強行指定返回狀態碼，就可以正常收到返回的了并且也沒有先前報錯的問題了。前段時間參與了一個H5項目，里邊有個需求是用戶上傳圖片。當時的方案是前端先調用微信的JSSDK選擇圖片并上傳，然后再從后端下載到服務器上。然而用的時...

yankeys 2019-08-20 10:31 評論0 收藏0
Web端文件上傳至阿里云OSS（基于Angular 5項目）

摘要：一準備工作開通阿里云服務，從控制臺上獲取和。參考資料阿里云官方文檔開始使用阿里云官方文檔介紹如何在中快速使用訪問服務微信公眾號圖片上傳至阿里云前端圖片直傳試驗如何基于和，快速搭建音視頻文件上傳服務聲明轉發請注明出處，謝謝一、準備工作 1. 開通阿里云OSS服務，從控制臺上獲取AccessKeyId和AccessKeySecret。 2. 創建Bucket，并登錄OSS控制臺 3. 配...

darkerXi 2019-08-23 13:56 評論0 收藏0
oss web直傳服務器簽名 - vue版本

摘要：前言為了減輕服務器壓力，采用直傳的方式，直接把資源圖片，文件，視頻等上傳到阿里云服務器。這個是需要觸發這個回調來通知服務器操作結果。服務器端同事調的，通過接口返回給前端的。這個就是簽名，最關鍵的。的的使用如下結束這樣就搞定了。前言：為了減輕服務器壓力，采用web直傳的方式，直接把資源(圖片，文件，視頻等)上傳到阿里云oss服務器。但是阿里只提供 plupload.js 環境下的 d...

Sunxb 2019-08-23 18:06 評論0 收藏0
圖片直傳阿里云OSS方案

摘要：和數據直傳到相比，以上方法有三個缺點上傳慢。端向服務端請求簽名，然后直接上傳，不會對服務端產生壓力，而且安全可靠。規定返回數據的格式，當前默認返回圖片信息寬度高度，可獲取更多數據。背景每個OSS的用戶都會用到上傳服務。Web端常見的上傳方法是用戶在瀏覽器或app端上傳文件到應用服務器，然后應用服務器再把文件上傳到OSS。 showImg(https://segmentfault.c...

imtianx 2019-08-23 12:49 評論0 收藏0