七牛云存儲---JavaScript SDK 簡單上傳，走過的幾個坑

or0fun 發布于2019-08-20 15:19 / 3486人閱讀

摘要：和七牛賬號里面提供。自己設定的七牛云存儲空間名，創建存儲空間的時候注意地區應該默認是華東，不一樣地區需要修改下里面指定的上傳的域名，請去參考官方文檔。若開啟該選項，為自動生成上傳成功后的文件名。

先放上幾個用到的七牛官方網站：

JavaScript SDK地址
需要在頁面中先引入 plupload 提供的 plupload.full.min.js（生產環境）
然后再引入SDK里的 qiniu.min.js（生產環境）

在線生成uptoken地址
uptoken上傳需要用到，正式項目一般由后臺生成，這里我們做測試，用自己的ak、sk、bucketName去官方生成一個（有時效性）。
AK和SK：七牛賬號里面提供。
bucketName：自己設定的七牛云存儲空間名，創建存儲空間的時候注意地區(應該默認是華東)，不一樣地區需要修改下qiniu.min.js里面指定的上傳的域名，請去參考官方文檔。
其它：可選的都可不填。

檢測uptoken是否可用地址(能否成功上傳)地址
token：上面生成的自己的token。
key：可以不填。
關于測試生成的token是否可用，也可以參考這個網站提供的demo，按他的說明修改demo里面的兩個值就可以判斷自己的token是否可用，并且有反饋，根據反饋的erro參考官方文檔。

關鍵代碼 html

這里要用button標簽，然后id和js方法中Qiniu.uploader的browse_button綁定。
這里用input標簽type="file"不行！

 //引入Plupload 、qiniu.js后
  var uploader = Qiniu.uploader({
      runtimes: "html5,flash,html4",    //上傳模式,依次退化
      browse_button: "pickfiles",       //上傳選擇的點選按鈕，**必需**
      uptoken: "myToken",
      //uptoken_url: "/token",            //Ajax請求upToken的Url，**強烈建議設置**（服務端提供）
      // uptoken: "", //若未指定uptoken_url,則必須指定 uptoken ,uptoken由其他程序生成
      // unique_names: true, // 默認 false，key為文件名。若開啟該選項，SDK為自動生成上傳成功后的key（文件名）。
      // save_key: true,   // 默認 false。若在服務端生成uptoken的上傳策略中指定了 `sava_key`，則開啟，SDK會忽略對key的處理
      domain: "myUrl",   //bucket 域名，下載資源時用到，**必需**
      get_new_uptoken: false,            //設置上傳文件的時候是否每次都重新獲取新的token
      container: "container",                //上傳區域DOM ID，默認是browser_button的父元素，
      max_file_size: "100mb",           //最大文件體積限制
      flash_swf_url: "Moxie.swf",       //引入flash,相對路徑
      max_retries: 3,                   //上傳失敗最大重試次數
      dragdrop: true,                   //開啟可拖曳上傳
      drop_element: "container",        //拖曳上傳區域元素的ID，拖曳文件或文件夾后可觸發上傳
      chunk_size: "4mb",                //分塊上傳時，每片的體積
      auto_start: true,                //選擇文件后自動上傳，若關閉需要自己綁定事件觸發上傳
      init: {
          "FilesAdded": function(up, files) {
              plupload.each(files, function(file) {
                  // 文件添加進隊列后,處理相關的事情
                  console.log(file.name);
              });
          },
          "BeforeUpload": function(up, file) {
                 // 每個文件上傳前,處理相關的事情
          },
          "UploadProgress": function(up, file) {
                 // 每個文件上傳時,處理相關的事情
          },
          "FileUploaded": function(up, file, info) {
                 // 每個文件上傳成功后,處理相關的事情
                 // 其中 info 是文件上傳成功后，服務端返回的json，形式如
                 // {
                 //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                 //    "key": "gogopher.jpg"
                 //  }
                 // 參考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                 // var domain = up.getOption("domain");
                 // var res = parseJSON(info);
                 // var sourceLink = domain + res.key; 獲取上傳成功后的文件的Url
          },
          "Error": function(up, err, errTip) {
                 //上傳出錯時,處理相關的事情
          },
          "UploadComplete": function() {
                 //隊列文件處理完畢后,處理相關的事情
          },
          "Key": function(up, file) {
                 // 若想在前端對每個文件的key進行個性化處理，可以配置該函數
                 // 該配置必須要在 unique_names: false , save_key: false 時才生效
                 var key = "";
                 // do something with key here
                 return key
          }
      }
  });

  // domain 為七牛空間（bucket)對應的域名，選擇某個空間后可以看到
  // uploader 為一個plupload對象，繼承了所有plupload的方法，參考http://plupload.com/docs

document.getElementById("pickfiles").onclick = function() {
  uploader.start();
};

GPU云服務器云服務器七牛云存儲圖片上傳七牛云存儲七牛云存儲教程七牛云存儲服務

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

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

用純Javascript實現React Native的文件上傳

摘要：是上傳到服務器的文件名，是請求令牌。七牛云將持續發布服務于企業的云服務，也會在第一時間發布平臺的，讓使用的小伙伴在第一時間集成七牛云的最新服務。 React Native 是最近兩年最值得花時間跟進的移動開發技術，這個項目始于2013年Facebook內部的一個黑客馬拉松項目，在2014年7月之前這個項目都偏向于實驗性質，直到廣告管理團隊想要構建一個獨立的iOS應用，然而這個團隊并沒有...

JasonZhang 2019-08-19 18:12 評論0 收藏0
關于七牛云正確使用姿勢探索

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

3fuyu 2019-07-01 12:39 評論0 收藏0
使用七牛云存儲的一些經驗總結

摘要：原文使用七牛云存儲的一些經驗總結錯誤處理如果在與七牛的交互中出現狀態碼為的錯誤，一句話，不要猶豫，直接聯系七牛技術支持。但是筆者發現，在使用七牛云轉化后的視頻，這樣做是無效的。近段時間將使用七牛云存儲來存放用戶上傳的數據，客戶端通過七牛的js-sdk與七牛交互，服務端C#實現了七牛相關的接口。在這過程中多多少少遇到點問題，在這里總結一下。原文：使用七牛云存儲的一些經驗總結 599錯...

Lyux 2019-08-21 12:23 評論0 收藏0
記錄一下前端分片上傳七牛云踩過的坑

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

ISherry 2019-08-21 11:51 評論0 收藏0
更好用的七牛云存儲 JS SDK，因為官方的太難用

摘要：目前可能是七牛瀏覽器文件上傳的最好實現。任務攔截器攔截任務返回，任務將會從任務隊列中剔除，不會被上傳中斷任務，返回，任務隊列將會在這里中斷，不會執行上傳操作。請上傳小于的文件你可以添加多個任務攔截器選擇上傳文件確定后該生命周期函數會被回調。 qiniu4js qiniu4js目前可能是七牛JavaScript瀏覽器文件上傳的最好實現。使用TypeScript編寫，不依賴任何三方庫，純...

iKcamp 2019-08-22 10:39 評論0 收藏0