element-ui中得upload组件上传视频到阿里OSS

element-ui中得upload组件上传视频到阿里OSS

1.安装ali-oss

npm/cnpm  i ali-oss --save

2.在相应得页面中引入OSS

import OSS from 'ali-oss'

3.上传视频到OSS上（我是在选择视频后就提前上传到OSS上面去了）
element-ui的应用：（上传到OSS是在绑定change的videoChange函数中）

 <el-upload
          ref="videoUpload"
          :http-request="fnUploadRequest"
          :disabled="disableBtn"
          :auto-upload="false"
          :on-remove="videoRemove"
          :file-list="fileListVideo"
          :on-change="videoChange"
          name="video"
          accept=".mp4, .webm, .OGG"
          list-type="picture"
        >
</el-upload>

js代码：

async videoChange(file, fileList) {
    
    
      console.log(file)
      const res = await getVideoSTS() // 这个是调的后端接口拿accessKeyId、accessKeySecret、stsToken
      console.log(res, '获取配置项')
      if (res.status === 200) {
    
    
        const data = res.data.data
        const client = new OSS({
    
    
          region: 'bucket 所在的区域，登录OSS在最外层会有显示，bucket也会有显示',
          accessKeyId: data.accessKeyId, // 换成自己的
          accessKeySecret: data.accessKeySecret, //换成自己的
          stsToken: data.securityToken, // 阿里的文档中给的demo实例中是没有这个参数的，但是这个是必须要有的
          bucket: '这是你们的bucket名字，我之前一直以为是个文件名还给了个自定义的文件夹，其实不是，这个就是你们服务器上的最外层文件夹像电池一样的东西的名字，文章末尾给贴个图'
        })
        // 获取后缀名，这个是自己写死的，可以随便定义，但是保证每次名字都要不同，我这个是选择视频的时候会给一个uid(打印形参file会看到),每次都不相同，我就拿这个拼接起名字了，比如我上传的是1.mp4,uid给的是123，最后就是file_123.mp4
        const index = file.name.lastIndexOf('.')
        const suffix = file.name.substring(index, file.name.length)
        const fileName = 'haiba-video/file_' + file.uid + suffix
        client.multipartUpload(fileName, file.raw, {
    
    }).then(result => {
    
    
          console.log(result)
          // videoUrl就是成功上传视频到OSS上返回的视频地址
          const videoUrl = '自己的域名' + result.name // result 是上传成功后返回的视频的名字 拼接上域名可以访问
        }).catch((err) => {
    
    
          console.log(err)
        })
      }
    },

bucket的找法：我们是下载了一个这个工具


在这个软件里面会看到很多像电池一样的东西，我打马赛克的就是bucket,(OSS控制台里建的名字)，
下面的oss-cn-hangzhou 就是region，（说像电池有点不靠谱了。。。。）

过程中可能会跨域：

自己别找答案了，我找了大半天，不是我们前端的问题，去找有权限登录阿里控制台的人，让他帮忙设置一下一下跨域访问，最后再试试就可以了。