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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 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
PHP脚本的10个技巧(2)
2006/10/09 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
浅谈php的优缺点
2015/07/14 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
学习十八大报告感言
2014/02/28 职场文书
大学三年计划书范文
2014/04/30 职场文书
爱护花草树木的标语
2014/06/11 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
简单租房协议书
2014/10/21 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
毕业生政审意见范文
2015/06/04 职场文书
岁月神偷观后感
2015/06/11 职场文书