Element上传组件对接腾讯云COS实现上传存储服务
前言
为什么要使用前端来做文件上传这件事？
如果使用后端上传，那么所有上传的文件都会走 Nginx服务，也就是说上传的带宽还是取决于你服务器的带宽大小，对上传几十 M 的文件来说就有点吃力了。
那Vue 的教程那么多，为什么要单独写此组件？
简单的来说，使用组件都是维护或二次开发一些程序，而 Element 组价可以支持直接引入到项目中，很方便。所以为了更方便这里介绍了使用 script的方式引入 sdk 来实现。
准备工作
cos-js-sdk-v5 文件下载后 dist 文件有打包好的 js 直接引入即可
Element 组件 Upload 上传
腾讯云cos 的相关账号信息和 api 的 SecretId 及 SecretKey
开始
首先设置 cos 跨域：
html代码
<div id="app-up"> <el-upload class="upload" drag :name="'iFile'" limit="1" accept=".mp4,.MP4,.mp3,.MP3" :disabled="isDisabled" :before-upload="beforeAvatarUpload" :http-request="handleUpload" > <i class="el-icon-upload"></i> <div class="el-upload__text">将影音文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip"> <p>只能上传mp3/mp4格式文件，且不超过1GB!</p> </div> <!-- 上传进度条 --> <el-progress :percentage="percentage" v-if="percentage<100 && percentage>0"></el-progress> <el-progress :percentage="percentage" status="success" v-if="percentage==100"></el-progress> </el-upload> </div>
js 代码
<script type="text/javascript">
new Vue({
el: '#app-up',
data: {
isDisabled: false,
percentage: 0, // 上传进度
originName: '', // 文件名
originSize: '', // 文件大小
uploadFail: false,
isLoad: 0, // 是否完成了上传
},
methods: {
handleUpload(e) {
let _this = this,
file = e.file;
if (!file) return;
_this.originName = file.name;
_this.originSize = file.size;
// 实例化对象
var cos = new COS({
SecretId: "你的SecretId",
SecretKey: "你的SecretKey",
})
// 上传
cos.putObject({
Bucket: "存储桶名",
Region: "地区简写",
Key: _this.originName, // 文件名
Body: file, // 上传文件对象
onProgress: function (progressData) {
_this.percentage = parseInt(progressData.percent * 100);
_this.isDisabled = true; // 禁止上传
$('.j-submit').attr('disabled', true); // 禁止提交表单
}
}, function (err, data) {
console.log(err || data);
if (data && data.Location && data.statusCode == 200) {
_this.isLoad = 1;
}
if (err) {
layer.msg('上传文件失败', {
icon: 2
, time: 1200
, shade: 0.5
});
}
_this.isDisabled = false;
_this.uploadFail = true;
$('.j-submit').attr('disabled', false);
});
},
// 上传前检查
beforeAvatarUpload(file) {
this.uploadFile = file
this.uploadFileName = file.name
const isLt2M = file.size / 1024 / 1024 <= 102400
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 1GB!')
}
return isLt2M
},
}
});
</script>如此就差不多了，当然此方法获取秘钥仅适用于前端调试，更多方法请见：https://cloud.tencent.com/document/product/436/11459
最后，强调下引入的文件列表：
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="assets/store/js/cos-js-sdk-v5.min.js"></script> <script src="assets/common/js/vue.min.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
评论