成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

七牛云上傳及上傳方法封裝

Muninn / 3780人閱讀

摘要：分片及七牛云上傳封裝項(xiàng)目里面用到七牛云，有分片和簡(jiǎn)單上傳在此做下簡(jiǎn)單的記錄，分享下面是分片上傳封裝是我寫(xiě)在里面分片的大小如分片項(xiàng)目是框架，請(qǐng)求是。

分片及七牛云上傳封裝
項(xiàng)目里面用到七牛云，有分片和簡(jiǎn)單上傳

在此做下簡(jiǎn)單的記錄，分享

下面是分片上傳封裝

process.env.MAX_FILESIZE 是我寫(xiě)在config里面分片的大小 如1024102410 10MB分片

項(xiàng)目是vue框架，請(qǐng)求是axios。

上傳的進(jìn)度在onUploadProgress中獲取

/**
 * 封裝upload方法
 * @param url 上傳路徑
 * @param json 包含file對(duì)象
 * @returns {Promise}
 */
export function upload(url,json) {
  return new Promise((resolve,reject) => {
      let size = parseInt(Number(json.file.size)/Number(process.env.MAX_FILESIZE) +1);
      let y = 0;
      let fun = function(){
        let formData = new FormData();
        let file = json.file.slice(y*process.env.MAX_FILESIZE,(y+1)*process.env.MAX_FILESIZE);
        formData.append("chunk", y);
        formData.append("file_name", json.file.name);
        formData.append("count", size);
        formData.append("type", json.type);
        formData.append("file", file);
        axios.post(url,formData,{ headers: {
            "Content-Type": "multipart/form-data"
          },timeout:10000000,
          onUploadProgress: progressEvent => {
            //progressEvent.loaded 為上傳進(jìn)度
          },
        }).then(response => {
            if(response.data.code === 200){
              if(y+1 {
            reject(err);
            let message = "請(qǐng)求失?。≌?qǐng)檢查網(wǎng)絡(luò)";
            if(err.response)message=err.response.data.message;
            Vue.prototype.$$msgbox({
              title:"錯(cuò)誤！",
              message:message,
              type:"error",
            })
          })
      };
      fun()
    }

  })
}

　　

下面是七牛云上傳的封裝

/**
 * 封裝upload方法
 * @param json json中包含fail
 * @returns {Promise}
 */
export function uploadQiniu(json) {
  return new Promise((resolve,reject) => {
axios.get("獲取七牛權(quán)限的后臺(tái)接口地址，主要獲取七牛token",{
        params:{
          file_name:json.file.name
        }
      }).then(resData =>{
          let putExtra = {
            fname: json.file.name,
            mimeType:json.mimeType || null
          };
          let congif = {};
          let observable = qiniu.upload(json.file,resData .data.data.new_name,resData .data.data.token,putExtra,congif);
          let observer = {
            next(res){
              let progress =  Number(res.total.percent.toFixed(0));
              // 此處得到上傳進(jìn)度百分比 可加后續(xù)操作
            },
            error(err){
              reject(err);
              let message = "請(qǐng)求失??！請(qǐng)檢查網(wǎng)絡(luò)";
              if(err.response)message=err.response.data.message;
              Vue.prototype.$alert({
                title:"錯(cuò)誤！",
                message:message,
                type:"error",
              })
            },
            complete(res){
              res.url = res.key;
              res.name = json.file.name;
              resolve(res);
            }
          };
          let subscription = observable.subscribe(observer)
        }
      );
    })

}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109021.html

相關(guān)文章

  • 記錄一下前端分片上傳七牛云踩過(guò)的坑

    摘要：后來(lái)查閱了資料后自己手動(dòng)實(shí)現(xiàn)了文件切片上傳到服務(wù)器基本需求已經(jīng)實(shí)現(xiàn)，但由于效率及穩(wěn)定性問(wèn)題后來(lái)決定還是直傳文件到七牛云?？偨Y(jié)起來(lái)七牛云上傳的套路就是后臺(tái)為你提供或者獲取的接口地址之后上傳的時(shí)候要帶上這個(gè)。 起因 最近在工作中有個(gè)上傳大文件的需求，原先咨詢過(guò)組里的大佬給我推薦了百度的webupload，但后來(lái)引入之后發(fā)現(xiàn)它是基于jquery封裝的。由于本身項(xiàng)目是基于vue開(kāi)發(fā)的所以與j...

    ISherry 評(píng)論0 收藏0

  • 關(guān)于七牛云正確使用姿勢(shì)探索

    摘要：，在后續(xù)測(cè)試時(shí)遇到一個(gè)詭異，當(dāng)文件過(guò)大時(shí)，任務(wù)腳本上傳到七牛云失敗。當(dāng)我遇到大文件無(wú)法上傳到七牛云時(shí)，斷點(diǎn)調(diào)試到這里，發(fā)現(xiàn)返回的是。后來(lái)還真被我找到了，七牛云官方提供一個(gè)腳本工具。 業(yè)務(wù)場(chǎng)景 需求 我們項(xiàng)目有一個(gè)文件上傳需求，需要從客戶端上傳到七牛云的對(duì)象存儲(chǔ)和自己的應(yīng)用服務(wù)器上。這里使用七牛云主要是實(shí)現(xiàn)下載分發(fā)。應(yīng)用服務(wù)器需要留一份是因?yàn)楹罄m(xù)需要做文件分析（并且是上傳后需要立馬分析出...

    3fuyu 評(píng)論0 收藏0

  • Laravel中前端js上傳圖片到七牛云

    摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫(xiě)好的方法，把傳入過(guò)去讓頁(yè)面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過(guò)CDN引入的Staticfi...

    jollywing 評(píng)論0 收藏0

  • Laravel中前端js上傳圖片到七牛云

    摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫(xiě)好的方法，把傳入過(guò)去讓頁(yè)面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過(guò)CDN引入的Staticfi...

    EscapedDog 評(píng)論0 收藏0

  • 文件上傳進(jìn)度提示

    摘要：需求當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒(méi)有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。 需求 當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒(méi)有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。而要在上傳過(guò)程實(shí)時(shí)顯示上傳進(jìn)度，則需要已上傳的大小和文件總大小。 前提 請(qǐng)求是異步的。因?yàn)橐獙?shí)時(shí)獲取到上傳的進(jìn)度...

    MageekChiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<