js纯前端实现腾讯cos文件上传功能的示例代码


Posted in Javascript onMay 14, 2019

前言

在前端开发中文件上传是经常会遇到的,并且多数情况会使用第三方平台来存储文件,腾讯云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相关接口传入参数即可。只要熟悉了这三个步骤,上传的大部分问题都能解决掉。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
JavaScript中对象介绍
Dec 31 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
mpvue 单文件页面配置详解
Dec 02 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 #Javascript
vue如何获取自定义元素属性参数值的方法
May 14 #Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 #Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 #Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 #Javascript
fastadmin中调用js的方法
May 14 #Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 #Javascript
You might like
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
使用pandas读取csv文件的指定列方法
2018/04/21 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
利用python实现周期财务统计可视化
2019/08/25 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
销售总监工作职责
2013/11/21 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
结婚典礼证婚词
2014/01/08 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
超市理货员岗位职责
2014/07/04 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2015选调生工作总结
2015/07/24 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
DQL数据查询语句使用示例
2022/12/24 MySQL