小程序分片上傳

當(dāng)前狀況:PC端有分片上傳的接口,小程序里沒有FormData 對(duì)象荡灾。
解決思路:自定義了一個(gè)FormData 對(duì)象(代碼以及用法:http://www.reibang.com/p/ece23dfd771a),傳參有所區(qū)別萌京,邏輯依然可以安卓web端的來。

在全局定義一個(gè)axios

Vue.prototype.$httpRequest2 = axios.create({
  withCredentials: true,
  crossDomain: true,
  baseURL: '',
  timeout: 6000
})

上傳組件UploadFile.vue
引入
import FormData from '@/lib/wx-formdata/formData.js'


    // 上傳文件
    uploadFile({
      currentAssetId,
      rootAssetId,
      fileUploadUrl,
      chunk,
      chunkSize,
      chunkTotal,
      fileExt,
      index,
      rid,
      md5
    }) {
      const that = this
      // 進(jìn)行上傳
      const start = (chunk - 1) * chunkSize
      let end = start + chunkSize
      let size = ''
      const item = this.uploadFileList.find(it => it.rid === rid)
      size = item.data.size
      item.state = 'progress'

      // 上傳完成
      if (start >= size) {
        // 更改本地?cái)?shù)據(jù)
        this.uploadFilesChange({
          currentAssetId: currentAssetId, // 文件id
          chunk: chunkTotal, // 當(dāng)前片
          chunkTotal: chunkTotal,
          state: 'success', // 狀態(tài)
          rid: rid, // 假數(shù)據(jù)id
          md5State: 2 // 是否是假數(shù)據(jù) 1:假數(shù)據(jù)  2:真數(shù)據(jù)
        })
        return
      }
      // 最后一片
      if (end > size) {
        end = size
      }
      // 組裝上傳參數(shù)
      let fileData = {}
      fileData = item.data.fData
      fileData = fileData.slice(start, end)

      // 獲取每一片的md5
      this.spark.append(fileData)
      const hexHash = this.spark.end(false)
      const chunkMd5 = hexHash
      const formData = new FormData()
      // formData.append('currentAssetId', currentAssetId)
      formData.appendFile('file', fileData, item.data.path)

      const _data = formData.getData()

    // 調(diào)用分片上傳接口
      that
        .$httpRequest2({
          url:
            fileUploadUrl +
            `Form?currentAssetId=${currentAssetId}&rootAssetId=${currentAssetId}&chunk=${chunk}&chunkSize=${chunkSize}&chunkTotal=${chunkTotal}&fileExt=${fileExt}&hash=${md5}&chunkHash=${chunkMd5}`,
          method: 'POST',
          timeout: 10000,
          headers: {
            'Content-Type': _data.contentType
 // 注意,這里不能直接使用  'Content-Type': 'multipart/form-data'他托,因?yàn)樾〕绦蛑袥]有 FormData對(duì)象,所以需要自定義一個(gè)FormData對(duì)象
          },
          data: _data.buffer
        })
        .then(res => {
          console.log('分片成功請(qǐng)求:', res, '第幾片:', chunk)
          // 存上傳進(jìn)度
          that.uploadFilesChange({
            currentAssetId: currentAssetId, // 文件id
            chunk: chunk + 1, // 當(dāng)前片
            chunkTotal: chunkTotal,
            state: 'success', // 狀態(tài)
            rid: rid, // 假數(shù)據(jù)id
            md5State: 2 // 是否是假數(shù)據(jù)
          })
          that.uploadFile({
            currentAssetId: currentAssetId,
            rootAssetId: rootAssetId,
            fileUploadUrl: fileUploadUrl,
            chunk: chunk + 1,
            chunkSize: chunkSize,
            chunkTotal: chunkTotal,
            fileExt: fileExt,
            index: index,
            rid: rid,
            md5: md5
          })
        })
        .catch(err => {
          console.log('成功請(qǐng)求后仆葡,上傳失敗赏参,重新上傳:', err)
          // 上傳失敗
          that.uploadFilesChange({
            currentAssetId: currentAssetId, // 文件id
            chunk: chunk, // 當(dāng)前片
            chunkTotal: chunkTotal,
            state: 'fail', // 狀態(tài)
            rid: rid, // 假數(shù)據(jù)id
            md5State: 2 // 是否是假數(shù)據(jù) 1:假數(shù)據(jù)  2:真數(shù)據(jù)
          })
          that.uploadFile({
            currentAssetId: currentAssetId,
            rootAssetId: rootAssetId,
            fileUploadUrl: fileUploadUrl,
            chunk: chunk,
            chunkSize: chunkSize,
            chunkTotal: chunkTotal,
            fileExt: fileExt,
            index: index,
            rid: rid,
            md5: md5
          })

          wx.showToast({
            title: res.msg,
            icon: 'none'
          })
        })
    }

注意,這里不能直接使用 'Content-Type': 'multipart/form-data'沿盅,因?yàn)樾〕绦蛑袥]有 FormData對(duì)象把篓,所以需要自定義一個(gè)FormData對(duì)象。上面所使用的是自己封裝的FormData對(duì)象腰涧。
用法:

這是結(jié)構(gòu):
components
|——UploadFile.vue
libs
|—— wx-formdata
|——formData.js
|——mimeType.js

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末韧掩,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子窖铡,更是在濱河造成了極大的恐慌疗锐,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件费彼,死亡現(xiàn)場離奇詭異窒悔,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)敌买,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門简珠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虹钮,你說我怎么就攤上這事聋庵。” “怎么了芙粱?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵祭玉,是天一觀的道長。 經(jīng)常有香客問我春畔,道長脱货,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任律姨,我火速辦了婚禮振峻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘择份。我一直安慰自己扣孟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布荣赶。 她就那樣靜靜地躺著凤价,像睡著了一般鸽斟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上利诺,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天富蓄,我揣著相機(jī)與錄音,去河邊找鬼慢逾。 笑死格粪,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的氛改。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼比伏,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼胜卤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起赁项,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤葛躏,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后悠菜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舰攒,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年悔醋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了摩窃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡芬骄,死狀恐怖猾愿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情账阻,我是刑警寧澤蒂秘,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站淘太,受9級(jí)特大地震影響姻僧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蒲牧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一撇贺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧冰抢,春花似錦显熏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缓升。三九已至,卻和暖如春蕴轨,著一層夾襖步出監(jiān)牢的瞬間港谊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來泰國打工橙弱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留歧寺,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓棘脐,卻偏偏與公主長得像斜筐,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蛀缝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

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