本文主要是介绍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, // 时间戳，单位秒，如：1580000000ExpiredTime: 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('音频上传成功');}})},
这篇关于cos + vue + Element UI 上传文件的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
