微信小程序上傳圖片至七牛

需求

  • 上傳圖片到服務(wù)器,在不同的設(shè)備上顯示

實(shí)現(xiàn)難點(diǎn)

有以下記錄點(diǎn)可以作為參考

  • 常規(guī)思路解決問題時(shí)的不可行之處膏斤,比如實(shí)現(xiàn)過程中的報(bào)錯(cuò),踩坑等
  • 實(shí)現(xiàn)需求時(shí)的思路卡殼位置

思路分析

  1. wx.uploadFile(Object object)將本地資源上傳到開發(fā)者服務(wù)器逮京,客戶端發(fā)起一個(gè) HTTPS POST請(qǐng)求,注意該請(qǐng)求的對(duì)象為測(cè)試服盅安,而后臺(tái)搭建一個(gè)圖片上傳的服務(wù)器比較麻煩,因此選擇使用方便的七牛云
  2. 小程序的請(qǐng)求為https世囊,因此與管理后臺(tái)的圖片上傳有所區(qū)別别瞭,但實(shí)現(xiàn)方法本質(zhì)是一樣的
  3. 如何使用七牛云的服務(wù),查看官方文檔株憾,或者百度看別人的教程蝙寨,下面是我在topshow這個(gè)項(xiàng)目中使用的方法

實(shí)現(xiàn)

實(shí)現(xiàn)該需求可以分為以下4步

  1. 克隆 gpake/qiniu-wxapp-sdk 倉庫: git clone https://github.com/gpake/qiniu-wxapp-sdk.git

  2. 在 SDK 目錄下找到 qiniuUploader.js 文件,在需要使用上傳功能的頁面引用 qiniuUploader.js 文件嗤瞎, 該方法四個(gè)參數(shù)墙歪,上傳成功的回調(diào)函數(shù)返回了成功上傳圖片的鏈接

  3. 獲取七牛直傳的token,調(diào)取后臺(tái)接口文檔七牛模塊的前端使用接口贝奇,獲取token和域名

    獲取token的接口和上傳七牛云的接口涉及到一個(gè)異步變同步操作的問題虹菲,因此引用了promise對(duì)象

  4. 調(diào)七牛直傳的接口,具體實(shí)現(xiàn)代碼如下:

//app.js中 獲取七牛直傳的token掉瞳,注意promise對(duì)象的使用
 fetchUptoken: function () {
        return new Promise(function(resolve, reject){
          wx.request({
            url: API.Qiniu.token,
            data: {},
            success: function(res){
              // success
              console.log(res.data.token)
             resolve(res)
            },
            fail: function() {
              // fail
            },
            complete: function() {
              // complete
            }
          })
        })
    },

//上傳圖片的page中
handleUploadImage: function () {
    const qiniuUploader = require("../../utils/qiniuUploader");
    let that = this;
    let {
      uploadPicture
    } = that.data
    // 通過微信的api選擇圖片毕源,暫存到本地文件夾,并且通過路徑名可以拿到該圖片
    wx.chooseImage({
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success: function (res) {
        let tempFilePaths = res.tempFilePaths; //選擇了多張圖片陕习,但由于上傳七牛云是單張上傳霎褐,因此需要循環(huán)調(diào)接口,注意是調(diào)兩個(gè)接口该镣,獲取直傳token和七牛直傳的接口
        tempFilePaths.map((r,i) => {
          app.fetchUptoken().then(function(res){ //異步變同步
            let uptoken = res.data.token
            //使用引入的qiniuUploader方法調(diào)七牛上傳的接口
            qiniuUploader.upload(
            r, //上傳的圖片
            (res) => {  //回調(diào) success
              console.log(res)
              uploadPicture.push(res.imageURL);
              that.setData({
                uploadPicture,
              })
              i == tempFilePaths.length - 1 && (
                that.uploadImage()
              )
            }, (error) => { //回調(diào) fail
              console.log('error: ' + error);
            }, 
            { // 參數(shù)設(shè)置  地區(qū)代碼 token domain 和直傳的鏈接 注意七牛四個(gè)不同地域的鏈接不一樣瘩欺,我使用的是華南地區(qū)
              region: 'SCN',
              uptoken: uptoken,
              uploadURL: 'https://up-z2.qbox.me',
              domain: 'http://ovkzx61hi.bkt.clouddn.com/',
            })
          })
        })
      }
    })
  },

  1. 這樣我們就拿到圖片在七牛云上的地址鏈接了 -- uploadPicture

備注

  1. 以上的內(nèi)容僅為前端的參考,后臺(tái)是實(shí)現(xiàn)的部分包括直傳token拌牲,和域名domain
  2. 大概了解了一下這個(gè)domain是公司申請(qǐng)的
  3. 小程序現(xiàn)在還沒有配置域名,后續(xù)需要將配置直傳的鏈接

往期精彩回顧


廣州蘆葦科技web前端

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末歌粥,一起剝皮案震驚了整個(gè)濱河市塌忽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌失驶,老刑警劉巖土居,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異嬉探,居然都是意外死亡擦耀,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門涩堤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來眷蜓,“玉大人,你說我怎么就攤上這事胎围∮跸担” “怎么了德召?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)汽纤。 經(jīng)常有香客問我上岗,道長(zhǎng),這世上最難降的妖魔是什么蕴坪? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任肴掷,我火速辦了婚禮,結(jié)果婚禮上背传,老公的妹妹穿的比我還像新娘呆瞻。我一直安慰自己,他們只是感情好续室,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布栋烤。 她就那樣靜靜地躺著,像睡著了一般挺狰。 火紅的嫁衣襯著肌膚如雪明郭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天丰泊,我揣著相機(jī)與錄音薯定,去河邊找鬼。 笑死瞳购,一個(gè)胖子當(dāng)著我的面吹牛话侄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播学赛,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼年堆,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了盏浇?” 一聲冷哼從身側(cè)響起变丧,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎绢掰,沒想到半個(gè)月后痒蓬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡滴劲,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年攻晒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片班挖。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鲁捏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出萧芙,到底是詐尸還是另有隱情碴萧,我是刑警寧澤乙嘀,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站破喻,受9級(jí)特大地震影響虎谢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜曹质,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一婴噩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧羽德,春花似錦几莽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至姨夹,卻和暖如春纤垂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背磷账。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工峭沦, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人逃糟。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓吼鱼,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親绰咽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子菇肃,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • 前言: 做小程序有一段時(shí)間了,總結(jié)一下做過的技術(shù)點(diǎn)取募,特此貢獻(xiàn)給小伙伴們琐谤!項(xiàng)目中,有圖片存儲(chǔ)矛辕、視頻存儲(chǔ)、錄音存儲(chǔ)這三...
    vobear閱讀 4,980評(píng)論 3 8
  • 為了方便大家了解并入門微信小程序付魔,我將一些可能會(huì)需要的知識(shí)聊品,列在這里,讓大家方便的從零開始學(xué)習(xí)几苍; 首先感謝幾位給予...
    極樂叔閱讀 3,452評(píng)論 2 16
  • 官方 API 地址: https://developer.qiniu.com/kodo/sdk/1283/java...
    屎香味十足閱讀 3,311評(píng)論 1 0
  • 1翻屈、在黃泉蓋間房 傳說世分三界,有人間妻坝,有昆侖伸眶,有冥界惊窖。 傳說中,人死之后要過鬼門關(guān)厘贼,經(jīng)黃泉路界酒,在黃泉路和冥府之間...
    小七_(dá)3352閱讀 948評(píng)論 0 1
  • 昨天晚上爸爸和樓上的鄰居去喝酒了,我告訴他少喝點(diǎn)嘴秸,可他又喝了不少才回來毁欣。 早上起床后我問:“爸...
    熟悉的陌生人77閱讀 199評(píng)論 0 0