js纯前端实现腾讯cos⽂件上传功能的⽰例代码
前⾔
在前端开发中⽂件上传是经常会遇到的，并且多数情况会使⽤第三⽅平台来存储⽂件，腾讯云cos是我们常⽤的。本篇⽂章就是带我从前端的⾓度实现腾讯云COS存储。本⽂参考了
步骤
安装腾讯云COS上传所需的sdk
下载cos-js-sdk-v5.min.js并引⼊index.html
监听⽂件上传组件
//监听⽂件变化
let file = this.files[0];
let type = pe
//初始化⽂件上传
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: pSecretId,
TmpSecretKey: pSecretKey,
XCosSecurityToken: singleInfo.sessionToken,
ExpiredTime: piredTime,
});
},
});
fileInfo.file_name = file.name;
//获取⽂件上传密钥
getFileToken (Vue, fileInfo, cos, file, uploadStatusCallbalck);
};
获取⽂件上传密钥（最好存在后端通过ajax请求获取，安全性较⾼）
function getFileToken (Vue, fileInfo, cos, file, uploadStatusCallbalck) {
let url = v.VUE_APP_URL + '/file/secretid';
if (!file) return;
// 异步获取临时密钥
axios
.get (url)
.then (function (res) {
if (de == 100000) {
//获取的临时秘钥存储在vuex中
Vue.$storemit ('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: v.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相关接⼝传⼊参数即可。只要熟悉了这三个步骤，上传的⼤部分问题都能解决掉。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。