七牛云存儲kodo基本使用

前言

圖片、視頻等資源如果存在自己服務器 訪問會很吃帶寬,可以將其放在云服務器 自己服務器只管理數(shù)據(jù) 
七牛簡單使用 記錄如下

基本使用

前端接入七牛的sdk文件,使用七牛的api進行上傳
前臺向七牛上傳資源需要憑證token,為了安全考慮 憑證token需要后臺服務器去七牛獲取
后臺也需要引入對應的sdk文件 并獲取token給客戶端
客戶端先請求自己服務器獲取token 然后將圖片資源和token一起 調用七牛上傳圖片的api上傳圖片
默認簡單上傳完成后 七牛服務器會返回客戶端 key 和 hash值
如果需要上傳完成后后臺服務器做處理,需要配置 callbackUrl(是一個 外網(wǎng)可訪問的、post接口地址)
js文檔:https://developer.qiniu.com/kodo/1283/javascript

nodejs接入七牛

下載:npm instal qiniu --save
引入:const qiniu = require('qiniu');
使用:
    var accessKey = 'xxx';
    var secretKey = 'xxxxx';
    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    var options = {
        scope: '七牛中上傳的空間名',
        callbackUrl: '外網(wǎng)可訪問的post接口地址 上傳成功后七牛會請求此接口 ',
        callbackBody:                       '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","name":"$(x:name)"}',
 //自定義的上傳成功后返回的的格式
        callbackBodyType: 'application/json'//返回體數(shù)據(jù)類型
    }
    var putPolicy = new qiniu.rs.PutPolicy(options);
    app.get('/qiniuToken', function (req, res) {
        var uploadToken = putPolicy.uploadToken(mac);
        res.json({ token: uploadToken });
    });

js前臺接入七牛

安裝:npm install qiniu-js --save
引入:<script src="./node_modules/qiniu-js/dist/qiniu.min.js"></script>
使用:
    上傳前壓縮:
            const options = {
                //圖片質量
                quality: 0.52,
                //如果壓縮后size比原圖大 是否就不壓縮  
                //不壓縮下面回調函數(shù)中data里的dist就會返回原文件
                noCompressIfLarger: true,
                // maxWidth: 800,
                // maxHeight: 618
            }
            qiniu.compressImage(imgFile, options).then(data => {
              // data 壓縮后的文件或原文件
                console.log(data);
            });
    上傳:     
            // qiniu.upload(文件,文件名,后端獲取的憑證token,空間名,配置對象(全部可選);
            //返回observable對象
            const observable = qiniu.upload(data.dist, data.dist.name, token, '空間名', {});
            // subscription: 為一個帶有 unsubscribe 方法的類實例,
            // 通過調用 subscription.unsubscribe() 停止當前文件上傳。
            const subscription = observable.subscribe({
                    next(res) {
                        // ...
                        console.log('next==', res);
                    },
                    error(err) {
                        // ...
                        console.log('error==', err);
                    },
                    complete(res) {
                        // ...
                        console.log('complete==', res);
                    }
                })
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 今天感恩節(jié)哎,感謝一直在我身邊的親朋好友。感恩相遇!感恩不離不棄。 中午開了第一次的黨會,身份的轉變要...
    余生動聽閱讀 10,890評論 0 11
  • 彩排完,天已黑
    劉凱書法閱讀 4,489評論 1 3
  • 沒事就多看看書,因為腹有詩書氣自華,讀書萬卷始通神。沒事就多出去旅游,別因為沒錢而找借口,因為只要你省吃儉用,來...
    向陽之心閱讀 4,976評論 3 11
  • 表情是什么,我認為表情就是表現(xiàn)出來的情緒。表情可以傳達很多信息。高興了當然就笑了,難過就哭了。兩者是相互影響密不可...
    Persistenc_6aea閱讀 129,725評論 2 7

友情鏈接更多精彩內容