前言
在前端開發(fā)中文件上傳是經(jīng)常會(huì)遇到的,并且多數(shù)情況會(huì)使用第三方平臺(tái)來存儲(chǔ)文件,騰訊云cos是我們常用的。本篇文章就是帶我從前端的角度實(shí)現(xiàn)騰訊云COS存儲(chǔ)。本文參考了騰訊云COS開發(fā)文檔 JavaScript SDK
步驟
安裝騰訊云COS上傳所需的sdk
下載cos-js-sdk-v5.min.js并引入index.html
監(jiān)聽文件上傳組件
//監(jiān)聽文件變化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ì)象(封裝起來其他地方上傳也可以用)
/** * 初始化上傳文件對(duì)象 * @param {object} Vue * @param {string} fileName 文件名 * @param {object} file 上傳的文件流及文件類型 名稱相關(guān)信息 * @param {Array} 允許上傳的文件類型 * @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', }; //前端做文件類型限制 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);};獲取文件上傳密鑰(最好存在后端通過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來上傳文件)
/** * @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ù) => 上傳文件。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注