vue 使用 cos上传，完美解决！！！！！

Love The Way You Lie 2022-12-24 06:58 520阅读 0赞

说到vue使用cos上传，还是因为我们的一次服务器大规模迁移。公司服务器阿里云迁往腾讯云。因为我之前发布过一个不使用第三方官方sdk上传的功能，代码贴的很细致，有兴趣的可以自己爬楼找一找。

> 好了废话不多说，开始大家最感兴趣的，贴代码！！！ （cos-js-sdk-v5.min.js自己下载去,别下错了！！！下错了，会各种报错，实在找不到，叫我，我给你找！！！！）

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="shortcut icon" href="/static/favicon.ico">
        <script type="text/javascript" src="./static/js/cos-js-sdk-v5.min.js"></script>  
        <title>xxxx后台</title>
        
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

上面傻瓜式引入就行（注:*不会就多喝水，把自己噎死*）

这里

这里换成自己的请求方法就行！！！实在不行自己写原生请求去，返回的数据自己对着调一调

// 初始化cos上传
        mounted(){ 
            //这里可以不用管，复制的官方的，vue使用直接调用对应上传cos.xxx api时候再传就好了
            // var Bucket = 'test-1302919045'; // 
            // var Region = 'ap-shanghai'; /* 存储桶所在地域，必须字段 */
        // 初始化实例
       let _this = this   //改下指向，不然下面methods(){}内的cos.xxx找不到
        _this.cos = new COS({ 
            // 必选参数
          getAuthorization: function (options, callback) { 
            _this.$post('td/cosTempKey').then(res=>{ 
                if(res.code == 200){ 
                    // const json = JSON.parse(res);
                    // console.log(json)
                        var credentials = res.data && res.data.credentials;
                        if (!res || !credentials) return console.error('credentials invalid');
                        callback({ 
                            TmpSecretId: credentials.tmpSecretId,
                            TmpSecretKey: credentials.tmpSecretKey,
                            XCosSecurityToken: credentials.sessionToken,
                            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                            StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000
                            ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000900
                            // ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
                            });
                  }
              })
            }
        })
        },

> 按照上面input绑定的事件，然后获取对应id （注:*多个上传的话，定义多个就行，不建议复用一个*）  
> 我这里使用的是分片上传cos.sliceUploadFile 会自动分片，啥都不用管

// ios包上传
     methods: { 
        ipa_selectFile(){ 
            //console.log(document.getElementById('ipa_file-selector').files[0])
            //这里是给可能会看不懂的同学看的，vue不建议操作DOM,能用ref的用ref。
            var file = document.getElementById('ipa_file-selector').files[0]   
            if (!file) return;
            // 分片上传文件
            let _this = this  //这里也该一下指向不然，下面上传回调里面this会找不到！！！！（注:假如你不用要的话，请过滤）
            _this.cos.sliceUploadFile({ 
                Bucket: 'xxxxxxxx',  // cos 桶 注:可以开发生产动态配置一下
                Region: 'xxxxxx',     // 参数
    		    Key: '/data/ipa/'+this.py+'_'+this.id+'/'+this.py+'_'+this.ios_id+'.ipa',  //上传指定的key格式，也就是前后端协商好的
    		    StorageClass: 'STANDARD',   //官方默认值
                Body: file,          // 上传文件对象
                onTaskReady: function(taskId) {                    /* 非必须 */
                    // console.log(taskId); 上传开始返回的 
                },
                onHashProgress: function (progressData) {        /* 非必须 */
                    // console.log(progressData); 上传中返回的 
                },
                onProgress: function (progressData) {            /* 非必须 */
                    // console.log(progressData); 上传中返回的 
                    let size = progressData.total
                    let ios_size = (size/ (1000 * 1000)).toFixed(2) + 'MB'
                    _this.ruleForm.ios_size = ios_size
                    // 文件进度条
                    let progress = progressData.percent
                    _this.ruleForm.ios_progress = progress*100  // 给的是B 按照 M 格式自己算了一下
                }
                }, function(err, data) { 
                    // console.log(err || data); 上传成功返回给你的
                    _this.ruleForm.ios_path = data.Key  
                });
    	    },
        }

可能会遇到的问题：1.方法找不到 2.跨域  
解决方式：1.引入不对，指向不对。2.前端记得让某后台小伙配置cos的时候开放哪些域名！！

好了，就这些。很简单很简单，网上一堆人发了一堆，又是下包又是封装这又是全局定义那！！！！有必要吗，弟弟行为。 饿死了~~~吃饭