Element上传组件对接腾讯云COS实现上传存储服务

 admin   2020-08-26 13:10   1705 人阅读  0 条评论

前言

为什么要使用前端来做文件上传这件事? 

    如果使用后端上传,那么所有上传的文件都会走 Nginx服务,也就是说上传的带宽还是取决于你服务器的带宽大小,对上传几十 M 的文件来说就有点吃力了。

Vue教程那么多,为什么要单独写此组件?

    简单的来说,使用组件都是维护或二次开发一些程序,而 Element 组价可以支持直接引入到项目中,很方便。所以为了更方便这里介绍了使用 script的方式引入 sdk 来实现。

准备工作

cos-js-sdk-v5 文件下载后 dist 文件有打包好的 JS 直接引入即可

Element 组件  Upload 上传

腾讯云cos 的相关账号信息和 api 的 SecretId 及 SecretKey

开始

首先设置 cos 跨域:

image.png

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>


发表评论:


表情

还没有留言,还不快点抢沙发?