web端阿里云oss直傳

官方API地址:https://help.aliyun.com/document_detail/31947.html

1. 獲取 OSS 圖片上傳憑證
  • 這個需要后端的配合浙踢,發(fā)送請求獲取即可。

  • 要注意獲取和保存的時機穗椅,根據(jù)過期時間記錄相關(guān) sessionStorage 比較好,既能減少請求的次數(shù)客蹋,又能保證上傳時憑證有效塞蹭。

  • 獲取憑證的流程和七牛直傳類似,可以看看上一篇 《七牛直傳文件》

  • 下面是一段示例:

http.post('url', function (res) {
    sessionStorage.setItem('accessInfo', res.returnInfo); // returnInfo 表示后端返回的值
    sessionStorage.setItem('expireTime', new Date().getTime() + 30 * 60 * 1000); // 時間可以與后端約定好讶坯,比后端短一點為佳番电,單位為 毫秒(ms)
});

2. 初始化上傳方法
  • 獲取之后就可以進行上傳了,這里用到了 plupload 插件辆琅,如果有更好的方案也可以交流一下漱办。
2.1 plupload 引入
2.2 代碼示例
  • 有幾個需要注意的點:

(1)plupload 會自動生成選擇上傳的方式和方法婉烟,所以需要在頁面初始化后就初始化 Uploader娩井,比如:在 window.onloadvuemounted 等地方調(diào)用隅很;

(2)可能會出現(xiàn)頁面中需要多個上傳的地方撞牢,browse_button 可以接收數(shù)組參數(shù)(組件化則不需要);

(3)不要忘記在 FilesAdded 后進行獲取憑證叔营、傳參、上傳等操作所宰;

  • 下面直接展示一段示例代碼绒尊,在代碼注釋中做介紹。
/**
*  初始化 plupload
* @param id 觸發(fā)文件上傳的按鈕 id
*/
function initPlupload (id) {
    var maxSize = '5mb';
    // 定義 plupload 對象
    var uploader = new plupload.Uploader({
        mulit_selection: false, // 禁止多文件上傳
        browse_button: id, // 觸發(fā)文件上傳的按鈕 id(傳入的參數(shù))
        url: 'http://oss-cn-hangzhou.aliyuncs.com', // 服務(wù)器的地址仔粥,與提供的阿里云的地址一致
        filters: {
            mime_types: [
                {
                    title: 'Image files',
                    extensions: 'jpg,png.bmp,jpeg' // 允許上傳的文件類型
                }
            ],
            max_file_size: maxSize, // 允許上傳的最大尺寸
            prevent_duplicates: false // 不允許上傳重復(fù)文件
        },
        resize: {
            width: 600, // 壓縮后的寬
            height: 400, //壓縮后的高
            crop: true, // 開啟圖片裁剪
            quality: 55, // 裁剪質(zhì)量婴谱,數(shù)值越小圖片越小
            preserve_headers: false, // 不保留圖片原數(shù)據(jù)
        },
        init: {
            // 上傳初始化
            PostInit: function () {},
            // 文件添加到上傳隊列后
            FilesAdded: function (up, files) {
                access = JSON.parse(session.getItem('accessInfo')); // 獲取信息,確保已拿到
                // 這里可以做一個判斷躯泰,如果沒有 accessInfo 則調(diào)用方法獲取
                /*** 這里有一點千萬要注意谭羔,添加到隊列后需要手動觸發(fā)上傳方法  ***/
                // 從后端獲取的憑證
                var params = {
                    key: access.key,
                    policy: access.policy,
                    OSSAccessKeyId: access.accessid,
                    success_action_status: 200, // 默認(rèn)是 204
                    signature: access.signature
                };

                // 配置參數(shù)
                up.setOption({
                    url: 'http://oss-cn-hangzhou.aliyuncs.com', // 后端返回的地址麦向,如果固定也可以不用修改瘟裸,與上面的 url 是一樣的
                    mulitipart_params: params // 傳入憑證,相當(dāng)于請求參數(shù)
                });

                // 開啟上傳
                up.start();
            },
            // 上傳進度
            UploadProgress: function (up, files) {},
            FileUploaded: function (up, file, info) {
                // file 里可以得到壓縮率
                if (info.status === 200) {
                    // 上傳成功后執(zhí)行的操作
                    // ... 例如獲取圖片的 url 地址
                } else if (info.status === 203) {
                    console.log('上傳到OSS成功诵竭,但是oss訪問用戶設(shè)置的上傳回調(diào)服務(wù)器失敗话告,失敗原因是:' + info.response);
                } else {
                    console.log(info.respose);
                }
            },
            // 錯誤信息
            Error: function (up, err) {
                if (err.code === -600) {
                    console.log('圖片大小不能超過' + maxSize);
                } else if (err.code === -601) {
                    console.log('文件類型不正確');
                } else if (err.code === -602) {
                    console.log('已上傳過');
                } else {
                    console.log(err);
                }
            }
        }
    });
}

3. 其他問題
  • 后端返回的圖片地址也有訪問的時間限制,如果過期了卵慰,就會返回 403沙郭。

目前沒有找到好的解決方案,由于“快推”中圖片只是臨時展示裳朋,所以沒有產(chǎn)生影響病线。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子送挑,更是在濱河造成了極大的恐慌绑莺,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件让虐,死亡現(xiàn)場離奇詭異紊撕,居然都是意外死亡,警方通過查閱死者的電腦和手機赡突,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門对扶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人惭缰,你說我怎么就攤上這事浪南。” “怎么了漱受?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵络凿,是天一觀的道長。 經(jīng)常有香客問我昂羡,道長絮记,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任虐先,我火速辦了婚禮怨愤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蛹批。我一直安慰自己撰洗,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布腐芍。 她就那樣靜靜地躺著差导,像睡著了一般。 火紅的嫁衣襯著肌膚如雪猪勇。 梳的紋絲不亂的頭發(fā)上设褐,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音埠对,去河邊找鬼络断。 笑死,一個胖子當(dāng)著我的面吹牛项玛,可吹牛的內(nèi)容都是我干的貌笨。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼襟沮,長吁一口氣:“原來是場噩夢啊……” “哼锥惋!你這毒婦竟也來了昌腰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤膀跌,失蹤者是張志新(化名)和其女友劉穎遭商,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捅伤,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡劫流,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了丛忆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片祠汇。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖熄诡,靈堂內(nèi)的尸體忽然破棺而出可很,到底是詐尸還是另有隱情,我是刑警寧澤凰浮,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布我抠,位于F島的核電站,受9級特大地震影響袜茧,放射性物質(zhì)發(fā)生泄漏菜拓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一笛厦、第九天 我趴在偏房一處隱蔽的房頂上張望尘惧。 院中可真熱鬧,春花似錦递递、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至悬荣,卻和暖如春菠秒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背氯迂。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工践叠, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嚼蚀。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓禁灼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親轿曙。 傳聞我的和親對象是個殘疾皇子弄捕,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 點擊查看原文 Web SDK 開發(fā)手冊 SDK 概述 網(wǎng)易云信 SDK 為 Web 應(yīng)用提供一個完善的 IM 系統(tǒng)...
    layjoy閱讀 13,787評論 0 15
  • 1僻孝、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,988評論 3 119
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)守谓,斷路器穿铆,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 這個春天來北京,給我最大的視覺享受就是北京的朝陽和夕陽斋荞,還有滿大院的楊柳荞雏,柳芽吐蕊,楊柳依依平酿,真正讓你能品位出賀知...
    一笑人生閱讀 1,176評論 1 6
  • 葡萄一個月前才激動地告訴我她談戀愛了染服,可昨天卻哭著給我打電話說失戀了别洪。我從來沒見到葡萄這么難過,我們從小一起長大柳刮,...
    長草的心閱讀 915評論 0 4