vue 使用 cos上傳，完美解決！！！！！

Good 奈斯發表於2020-11-27
Vue

說到vue使用cos上傳，還是因為我們的一次伺服器大規模遷移。公司伺服器阿里雲遷往騰訊雲。因為我之前釋出過一個不使用第三方官方sdk上傳的功能，程式碼貼的很細緻，有興趣的可以自己爬樓找一找。

好了廢話不多說，開始大家最感興趣的，貼程式碼！！！ （cos-js-sdk-v5.min.js自己下載去,別下錯了！！！下錯了，會各種報錯，實在找不到，叫我，我給你找！！！！）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <script type="text/javascript" src="./static/js/cos-js-sdk-v5.min.js"></script>  
    <title>xxxx後臺</title>
    
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

上面傻瓜式引入就行（注:不會就多喝水，把自己噎死）

這裡

<input
                type="file"
                id="ipa_file-selector"
                :data-dir="app_id"
                data-name="game"
                @change="ipa_selectFile"
              />

這裡換成自己的請求方法就行！！！實在不行自己寫原生請求去，返回的資料自己對著調一調

 // 初始化cos上傳
    mounted(){
        //這裡可以不用管，複製的官方的，vue使用直接呼叫對應上傳cos.xxx api時候再傳就好了
        // var Bucket = 'test-1302919045';   // 
        // var Region = 'ap-shanghai';     /* 儲存桶所在地域，必須欄位 */
    // 初始化例項
   let _this = this   //改下指向，不然下面methods(){}內的cos.xxx找不到
    _this.cos = new COS({
        // 必選引數
      getAuthorization: function (options, callback) {
        _this.$post('td/cosTempKey').then(res=>{
            if(res.code == 200){
                //  const json = JSON.parse(res);
                //  console.log(json)
                    var credentials = res.data && res.data.credentials;
                    if (!res || !credentials) return console.error('credentials invalid');
                    callback({
                        TmpSecretId: credentials.tmpSecretId,
                        TmpSecretKey: credentials.tmpSecretKey,
                        XCosSecurityToken: credentials.sessionToken,
                        // 建議返回伺服器時間作為簽名的開始時間，避免使用者瀏覽器本地時間偏差過大導致簽名錯誤
                        StartTime: res.data.startTime, // 時間戳，單位秒，如：1580000000
                        ExpiredTime: res.data.expiredTime, // 時間戳，單位秒，如：1580000900
                        // ScopeLimit: true, // 細粒度控制許可權需要設為 true，會限制金鑰只在相同請求時重複使用
                        });
              }
          })
        }
    })
    },

按照上面input繫結的事件，然後獲取對應id （注:多個上傳的話，定義多個就行，不建議複用一個）
我這裡使用的是分片上傳cos.sliceUploadFile 會自動分片，啥都不用管

// ios包上傳
 methods: {
    ipa_selectFile(){
        //console.log(document.getElementById('ipa_file-selector').files[0])
        //這裡是給可能會看不懂的同學看的，vue不建議操作DOM,能用ref的用ref。
        var file = document.getElementById('ipa_file-selector').files[0]   
        if (!file) return;
        // 分片上傳檔案
        let _this = this  //這裡也該一下指向不然，下面上傳回撥裡面this會找不到！！！！（注:假如你不用要的話，請過濾）
        _this.cos.sliceUploadFile({
            Bucket: 'xxxxxxxx',  // cos 桶  注:可以開發生產動態配置一下
            Region: 'xxxxxx',     //   引數
		    Key: '/data/ipa/'+this.py+'_'+this.id+'/'+this.py+'_'+this.ios_id+'.ipa',  //上傳指定的key格式，也就是前後端協商好的
		    StorageClass: 'STANDARD',   //官方預設值
            Body: file,          // 上傳檔案物件
            onTaskReady: function(taskId) {                   /* 非必須 */
                // console.log(taskId);  上傳開始返回的 
            },
            onHashProgress: function (progressData) {       /* 非必須 */
                // console.log(progressData);  上傳中返回的 
            },
            onProgress: function (progressData) {           /* 非必須 */
                // console.log(progressData);  上傳中返回的 
                let size = progressData.total
                let ios_size = (size/ (1000 * 1000)).toFixed(2) + 'MB'
                _this.ruleForm.ios_size = ios_size
                // 檔案進度條
                let progress = progressData.percent
                _this.ruleForm.ios_progress = progress*100  // 給的是B 按照 M 格式自己算了一下
            }
            }, function(err, data) {
                // console.log(err || data);   上傳成功返回給你的
                _this.ruleForm.ios_path = data.Key  
            });
	    },
    }

可能會遇到的問題：1.方法找不到 2.跨域
解決方式：1.引入不對，指向不對。2.前端記得讓某後臺小夥配置cos的時候開放哪些域名！！

好了，就這些。很簡單很簡單，網上一堆人發了一堆，又是下包又是封裝這又是全域性定義那！！！！有必要嗎，弟弟行為。 餓死了~~~吃飯

相關文章