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

Muninn 發布于2019-08-26 13:33 / 3748人閱讀

摘要：分片及七牛云上傳封裝項目里面用到七牛云，有分片和簡單上傳在此做下簡單的記錄，分享下面是分片上傳封裝是我寫在里面分片的大小如分片項目是框架，請求是。

分片及七牛云上傳封裝
項目里面用到七牛云，有分片和簡單上傳

在此做下簡單的記錄，分享

下面是分片上傳封裝

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

項目是vue框架，請求是axios。

上傳的進度在onUploadProgress中獲取

/**
 * 封裝upload方法
 * @param url 上傳路徑
 * @param json 包含file對象
 * @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 為上傳進度
          },
        }).then(response => {
            if(response.data.code === 200){
              if(y+1 {
            reject(err);
            let message = "請求失敗！請檢查網絡";
            if(err.response)message=err.response.data.message;
            Vue.prototype.$$msgbox({
              title:"錯誤！",
              message:message,
              type:"error",
            })
          })
      };
      fun()
    }

  })
}

下面是七牛云上傳的封裝

/**
 * 封裝upload方法
 * @param json json中包含fail
 * @returns {Promise}
 */
export function uploadQiniu(json) {
  return new Promise((resolve,reject) => {
axios.get("獲取七牛權限的后臺接口地址，主要獲取七牛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));
              // 此處得到上傳進度百分比 可加后續操作
            },
            error(err){
              reject(err);
              let message = "請求失敗！請檢查網絡";
              if(err.response)message=err.response.data.message;
              Vue.prototype.$alert({
                title:"錯誤！",
                message:message,
                type:"error",
              })
            },
            complete(res){
              res.url = res.key;
              res.name = json.file.name;
              resolve(res);
            }
          };
          let subscription = observable.subscribe(observer)
        }
      );
    })

}

GPU云服務器云服務器七牛云存儲圖片上傳上傳及顯示圖片php 七牛上傳策略七牛上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109021.html

記錄一下前端分片上傳七牛云踩過的坑

摘要：后來查閱了資料后自己手動實現了文件切片上傳到服務器基本需求已經實現，但由于效率及穩定性問題后來決定還是直傳文件到七牛云。總結起來七牛云上傳的套路就是后臺為你提供或者獲取的接口地址之后上傳的時候要帶上這個。起因最近在工作中有個上傳大文件的需求，原先咨詢過組里的大佬給我推薦了百度的webupload，但后來引入之后發現它是基于jquery封裝的。由于本身項目是基于vue開發的所以與j...

ISherry 2019-08-21 11:51 評論0 收藏0
關于七牛云正確使用姿勢探索

摘要：，在后續測試時遇到一個詭異，當文件過大時，任務腳本上傳到七牛云失敗。當我遇到大文件無法上傳到七牛云時，斷點調試到這里，發現返回的是。后來還真被我找到了，七牛云官方提供一個腳本工具。業務場景需求我們項目有一個文件上傳需求，需要從客戶端上傳到七牛云的對象存儲和自己的應用服務器上。這里使用七牛云主要是實現下載分發。應用服務器需要留一份是因為后續需要做文件分析（并且是上傳后需要立馬分析出...

3fuyu 2019-07-01 12:39 評論0 收藏0
Laravel中前端js上傳圖片到七牛云

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

jollywing 2019-08-20 19:08 評論0 收藏0
Laravel中前端js上傳圖片到七牛云

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

EscapedDog 2019-06-28 13:39 評論0 收藏0
文件上傳進度提示

摘要：需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。而要在上傳過程實時顯示上傳進度，則需要已上傳的大小和文件總大小。前提請求是異步的。因為要實時獲取到上傳的進度...

MageekChiu 2019-08-20 15:17 評論0 收藏0