cos + vue + Element UI 上传文件的实现

这是将本地文件上传到腾讯云服务器的基本方法,官方也有相应的文档,需要的同学可以去官方文档查看。腾讯云官方文档,着急的同学可以 跟着以下步骤快速实现。

(1)安装 SDK 并引入

安装:

复制代码
npm i cos-js-sdk-v5 --save

引入:

复制代码
const COS = require('cos-js-sdk-v5');
// 或
import COS from 'cos-js-sdk-v5';

(2)获取秘钥

这个过程一般是后端去做,此处略去,需要的话官网自查。

(3)初始化

新建一个 cos.js.

复制代码
import COS from 'cos-js-sdk-v5';

export const cos = new COS({
    // getAuthorization 必选参数
    getAuthorization: function(options, callback) {
        const url = `http://example.com/server/sts.php`; // url 替换成您自己的后端服务
        const xhr = new XMLHttpRequest();
        let data = null;
        let credentials = null;
        xhr.open('GET', url, true);
        xhr.onload = function (e) {
            try {
              data = JSON.parse(e.target.responseText);
              credentials = data.data;
            } catch (e) {
            }

            callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              SecurityToken: credentials.sessionToken,
              // 建议返回服务器时间作为签名的开始时间,避免用户浏览器本地时间偏差过大导致签名错误
              StartTime: 0, // 时间戳,单位秒,如:1580000000
              ExpiredTime: 1580000000 // 时间戳,单位秒,如:1580000000
          });
        };
        xhr.send();
      }
  });

当然这个过程也可以用 axios 实现,此处引用的是官网的方法。

(4)开始上传

复制代码
<el-upload
  :http-request="uploadSuccess"
  action="#"
  :show-file-list="false"
  :before-upload="beforeUpload">
  <el-button size="mini" type="success" @click="upload(scope.row)">上传</el-button>
</el-upload>        

// 上传音频
 uploadSuccess(file){
    const params = {
      Bucket: 'marketing-report-test-1303824005', /* 填写自己的 bucket,必须字段 */
      Region: 'ap-beijing',     /* 存储桶所在地域,必须字段 */
      Key: `map/audio/${file.file.name}.wav`,              /* 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必须字段 */
      Body: file.file, // 上传文件对象
      SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值,超过5MB 使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */
    };
    cos.uploadFile(params).then(res => {
      console.log('load', file, `map/audio/${file.file.name}${new Date().valueOf()}.wav`)
      if(res.statusCode === 200){
        this.$message.success('音频上传成功');
      }
    })
  },
相关推荐
LaoZhangAI2 小时前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI2 小时前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou2 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀2 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭2 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu3 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face3 小时前
promise 规范应用
前端
Mintopia3 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face3 小时前
事件循环
前端·javascript
ONE_Gua3 小时前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫