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 相关文章推荐
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
javascript实现获取字符串hash值
May 10 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
js获取Get值的方法
2016/09/29 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python实现画循环圆
2019/11/23 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
董事长秘书职责
2014/01/31 职场文书
党员承诺书范文
2014/05/19 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
python3实现无权最短路径的方法
2021/05/12 Python