js純前端實(shí)現(xiàn)騰訊cos文件上傳功能的示例代碼

更新時(shí)間：2019年05月14日 15:07:33 作者：暴走的snail

這篇文章主要介紹了vue純前端實(shí)現(xiàn)騰訊cos文件上傳功能的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

在前端開(kāi)發(fā)中文件上傳是經(jīng)常會(huì)遇到的，并且多數(shù)情況會(huì)使用第三方平臺(tái)來(lái)存儲(chǔ)文件，騰訊云cos是我們常用的。本篇文章就是帶我從前端的角度實(shí)現(xiàn)騰訊云COS存儲(chǔ)。本文參考了騰訊云COS開(kāi)發(fā)文檔 JavaScript SDK

步驟

安裝騰訊云COS上傳所需的sdk

下載cos-js-sdk-v5.min.js并引入index.html

監(jiān)聽(tīng)文件上傳組件

//監(jiān)聽(tīng)文件變化
document.getElementById('file').onchange = function() {
          let file = this.files[0];
          let type = file.type
          //初始化文件上傳
          initUploadObj(that, file.name, file, 'image', function(res) {
            if (res.success) {
              that.$message.success(res.msg)
            } else {
              that.$message.warning(res.msg)
            }
          })
        }

初始化文件上傳對(duì)象（封裝起來(lái)其他地方上傳也可以用）

/**
 * 初始化上傳文件對(duì)象
 * @param {object} Vue
 * @param {string} fileName 文件名
 * @param {object} file 上傳的文件流及文件類(lèi)型 名稱(chēng)相關(guān)信息
 * @param {Array} 允許上傳的文件類(lèi)型
 * @param {function} uploadStatusCallbalck
 * @return {function} 返回回調(diào)函數(shù)
 */
export const initUploadObj = function (Vue,fileName,file,type,uploadStatusCallbalck) {
 let fileInfo = {
  file_name: fileName,
  media_type: 2,
  media_sub_type: 0,
  size_of_bytes: 122,
  file_expired_type: 'permanent',
 };
 //前端做文件類(lèi)型限制
 if(type == 'image'){
  type = ['.jpg','.gif','.jpeg','.bmp','.png']
 }
 if(type == 'excel'){
  type = ['.xlsx']
 }
 let fileType =file.name ? file.name.substring(file.name.lastIndexOf(".")).toLowerCase() : ''; 
 if (!!type && type.indexOf (fileType) < 0) {
  uploadStatusCallbalck ({success: false, msg: '請(qǐng)上傳正確的'+type+'文件格式!'});
  return;
 }
 var cos = new COS ({
  getAuthorization: function (options, callback) {
   let singleInfo = Vue.$store.state.fileToken;
   callback ({
    TmpSecretId: singleInfo.tmpSecretId,
    TmpSecretKey: singleInfo.tmpSecretKey,
    XCosSecurityToken: singleInfo.sessionToken,
    ExpiredTime: singleInfo.expiredTime,
   });
  },
 });
 fileInfo.file_name = file.name;
 //獲取文件上傳密鑰
 getFileToken (Vue, fileInfo, cos, file, uploadStatusCallbalck);
};

獲取文件上傳密鑰（最好存在后端通過(guò)ajax請(qǐng)求獲取，安全性較高）

function getFileToken (Vue, fileInfo, cos, file, uploadStatusCallbalck) {
 let url = process.env.VUE_APP_URL + '/file/secretid';
 if (!file) return;
 // 異步獲取臨時(shí)密鑰
 axios
  .get (url)
  .then (function (res) {
   if (res.data.code == 100000) {
    //獲取的臨時(shí)秘鑰存儲(chǔ)在vuex中
    Vue.$store.commit ('UPDATE_FILE_INFO', res.data.data);
    uploadFile (cos, file, res.data.data, uploadStatusCallbalck);
   } else {
    uploadStatusCallbalck ({success: false, msg: '獲取文件秘鑰失敗!'});
   }
  })
  .catch (function (err) {
   uploadStatusCallbalck ({success: false, msg: '獲取文件秘鑰接口出錯(cuò)!'});
  });
}

上傳文件(調(diào)用相關(guān)api putObject來(lái)上傳文件)

/**
 * @method uploadFile
 * @param {object} cos
 */
function uploadFile (cos, file, signInfo, callback) {
 cos.putObject (
  {
   Bucket: process.env.VUE_APP_BUCKET,
   Region: 'ap-shanghai',
   Key: signInfo.fileId,
   Body: file,
   onHashProgress: function (progressData) {
    console.log ('校驗(yàn)中', JSON.stringify (progressData));
   },
   onProgress: function (progressData) {
    console.log ('上傳中', JSON.stringify (progressData));
   },
  },
  function (err, data) {
   if (err) {
    console.log (err);
    callback ({success: false, msg: '文件上傳失敗!'});
    return;
   }
   callback ({success: true, msg: '上傳成功!', data: data, signInfo: signInfo});
  }
 );
}

總結(jié)

騰訊云cos文件上傳實(shí)際是分為三步，本地表單處理文件流 => 根據(jù)文檔獲取相關(guān)參數(shù) => 上傳文件。

第一步主要前端上傳功能的處理，可以用來(lái)限制文件上傳大小（不太準(zhǔn)確，根據(jù)文件的字節(jié)流長(zhǎng)度），文件上傳類(lèi)型（根據(jù)文件后綴名）。
第二步的參數(shù)多數(shù)都是可以在cos賬號(hào)后臺(tái)拿到的。這塊參數(shù)最好還是存儲(chǔ)在后臺(tái)比較安全。
第三步上傳我們只需要調(diào)用sdk相關(guān)接口傳入?yún)?shù)即可。只要熟悉了這三個(gè)步驟，上傳的大部分問(wèn)題都能解決掉。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: