PHP上传文件到腾讯cos上源码,js纯前端实现腾讯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相关接口传入参数即可。只要熟悉了这三个步骤，上传的大部分问题都能解决掉。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。