纯前端实现腾讯cos文件上传功能

简介: 在前端开发中文件上传是经常会遇到的,并且多数情况会使用第三方平台来存储文件,腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档 JavaScript SDK

前言


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


相关文章
|
10月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
554 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
9月前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
2866 64
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
645 4
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
1985 1
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
337 1
|
前端开发 JavaScript
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
210 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
211 13
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
509 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
846 0