欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-21 08:48:16
前言 在前端开发中文件上传是经常会遇到的,并且多数情况会使用第三方平台来存储文件,腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云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相关接口传入参数即可。只要熟悉了这三个步骤,上传的大部分问题都能解决掉。

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