純前端實現騰訊cos文件上傳功能

前言

在前端開發中文件上傳是經常會遇到的，並且多數情況會使用第三方平臺來存儲文件，騰訊雲cos是我們常用的。本篇文章就是帶我從前端的角度實現騰訊雲COS存儲。本文參考了騰訊雲COS開發文檔 JavaScript SDK

步驟

• 安裝騰訊雲COS上傳所需的sdk

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

• 監聽文件上傳組件

//監聽文件變化
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)
                        }
                    })
                }

• 初始化文件上傳對象（封裝起來其他地方上傳也可以用）

/**
 * 初始化上傳文件對象
 * @param {object} Vue
 * @param {string} fileName 文件名
 * @param {object} file 上傳的文件流及文件類型 名稱相關信息
 * @param {Array} 允許上傳的文件類型
 * @param {function} uploadStatusCallbalck
 * @return {function} 返回回調函數
 */
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',
  };
  //前端做文件類型限制
  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: '請上傳正確的'+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);
};

• 獲取文件上傳密鑰（最好存在後端通過ajax請求獲取，安全性較高）

function getFileToken (Vue, fileInfo, cos, file, uploadStatusCallbalck) {
  let url = process.env.VUE_APP_URL + '/file/secretid';
  if (!file) return;
  // 異步獲取臨時密鑰
  axios
    .get (url)
    .then (function (res) {
      if (res.data.code == 100000) {
        //獲取的臨時祕鑰存儲在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: '獲取文件祕鑰接口出錯!'});
    });
}

• 上傳文件(調用相關api putObject來上傳文件)

/**
 * @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 ('校驗中', 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});
    }
  );
}

總結

騰訊雲cos文件上傳實際是分爲三步，本地表單處理文件流 => 根據文檔獲取相關參數 => 上傳文件。

• 第一步主要前端上傳功能的處理，可以用來限制文件上傳大小（不太準確，根據文件的字節流長度），文件上傳類型（根據文件後綴名）。
• 第二步的參數多數都是可以在cos賬號後臺拿到的。這塊參數最好還是存儲在後臺比較安全。
• 第三步上傳我們只需要調用sdk相關接口傳入參數即可。只要熟悉了這三個步驟，上傳的大部分問題都能解決掉。