js纯前端实现腾讯cos文件上传功能的示例代码
前言
在前端开发中文件上传是经常会遇到的，并且多数情况会使用第三方平台来存储文件，腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档JavaScriptSDK
步骤
安装腾讯云COS上传所需的sdk
下载cos-js-sdk-v5.min.js并引入index.html
监听文件上传组件
//监听文件变化
document.getElementById('file').onchange=function(){
letfile=this.files[0];
lettype=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}返回回调函数
*/
exportconstinitUploadObj=function(Vue,fileName,file,type,uploadStatusCallbalck){
letfileInfo={
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']
}
letfileType=file.name?file.name.substring(file.name.lastIndexOf(".")).toLowerCase():'';
if(!!type&&type.indexOf(fileType)<0){
uploadStatusCallbalck({success:false,msg:'请上传正确的'+type+'文件格式!'});
return;
}
varcos=newCOS({
getAuthorization:function(options,callback){
letsingleInfo=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请求获取，安全性较高）
functiongetFileToken(Vue,fileInfo,cos,file,uploadStatusCallbalck){
leturl=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:'获取文件秘钥接口出错!'});
});
}
上传文件(调用相关apiputObject来上传文件)
/**
*@methoduploadFile
*@param{object}cos
*/
functionuploadFile(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相关接口传入参数即可。只要熟悉了这三个步骤，上传的大部分问题都能解决掉。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。