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获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
js实现tab切换效果实例
Sep 16 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
解决 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
NOT NULL 和NULL
2007/01/15 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php获取微信openid方法总结
2019/10/10 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Oracle快照(snapshot)
2015/03/13 面试题
大学学生会竞选演讲稿
2014/04/25 职场文书
企业读书活动总结
2014/06/30 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
民事答辩状格式范文
2015/05/21 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
vue动态绑定style样式
2022/04/20 Vue.js