vue使用阿里云点播上传Video采坑记Sts方式

我喜欢的样子，你都有。

今天来讲讲我最近使用阿里云点播服务上传视频遇到的坑

首先我的项目是Vue,人家的官网上面也提到了这个东西 阿里云这里面有demo,参照demo的方式我进行上传, 将代码进行修改后,大概是这个样子的

在这里插入图片描述

因为vue使用的组件化开发,所以要将依赖进行模块化引入,然后将上传文件的样式进行替换,为什么要进行替换呢?因为vue配套的的样式是Element-UI,现在不能用人家的组件了,得自己写,代码是这个样子的

     
           
文件上传
          *请上传2M以内的视频
      
      
  

方法呢就是人家阿里云提供的方法我就不写了,
此时是可以进行上传的,代码没有毛病,只不过使用的userId得是自己公司注册的,因为我使用的方法是Sts方式进行上传,所以还需要从后台拿到Sts上传凭证,

 // 开始上传
   onUploadstarted: function (uploadInfo) {
       var that_uploader = uploader;
       getStsFn().then(res => { // 这是我封装的方法
           if (res.code == 0) {
               let info = res.data;
               let accessKeyId = info.accessKeyId;
               let accessKeySecret = info.accessKeySecret;
               let secretToken = info.securityToken;
               that_uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);
               self.statusText = '文件开始上传...'
               self.$message({ message: '文件开始上传...', center: true, type: 'success' });
           } else {
               self.$message({ message: res.message, center: true, type: 'error' });
           }
       })
   },

本地开发环境就是这个样子,然而我们开发完成要上到环境上,执行打包命令行npm run build然后上传的环境上,此时就会报错了,报错如下

在这里插入图片描述

具体这个原因是什么呢,我也不太清楚,但是意思我是懂的,这个错误发生在上传阿里云的三个js脚本中的一个,

在这里插入图片描述

就在这个js脚本中,我当时就排查了两天,都没有找到原因,睡觉都睡不踏实,后来经琢磨,才发现这个东西是鱼和熊掌的故事,为什么这么说呢,当时我换了个思路,就是项目打包完成之前,将当前模块中引入的三个js脚本进行注释,也就是不进行引入,在index.html中进行script引入

在这里插入图片描述

,然后打包之后再dist文件中就会有一个lib目录,前提是在你的项目中得有这样一个目录,这是打包完成之后的代码及目录

在这里插入图片描述

在这里插入图片描述

此时上传到环境就不会报错了,但是这个样子的话本地开发就不好使了,所以说是鱼和熊掌的故事,问题得到完美解决,基本流程截图就是这个样子,流程我也大概说了.

再此附上我的私人博客 李大玄
还有我的QQ,有问题的话可以向我进行咨询 2489757828
再此向所有的前端开发说 共勉,加油