web端OSS上传大文件小结

web端OSS上传大文件小结

背景

​ 在OM媒体大脑项目的实际使用中，用户时不时的会上传超过1G甚至是几十个G的视频素材文件到OSS服务器，原本项目中用了vue-simple-upload[github]来做解决方案，效果并不是很好。在实际上传中发现当上传超过1个G的文件后，上传的请求就会失败，于是便使用了OSS自己的上传方式。

1.控制台操作

在上传之前，需要先了解阿里云OSS对象存储的一些基本概念。

1.1 进入对象储存界面

1.2 OSS基本概念

1.2.1 Bucket

Bucket实质就是阿里云OSS对象存储的一个存储空间，按照计算机理解的话可以理解为一个磁盘。

上传之前需要新建一个Bucket。

创建好之后，就可以得到zhangweidietest.oss-cn-hangzhou.aliyuncs.com的上传域名

1.2.2 AccessKey

AccessKey是访问阿里云API的秘钥，这里也需要提前创建一份，创建后我们需要记住自己的AccessKey ID和Access Key Secret，如果忘记可以在如图位置查询。

2 代码实现（vue为例）

1 引入Ali包

npm install ali-oss --save

2 创建OSS实例

const OSS = require('ali-oss')
const client = new OSS({
  accessKeyId: '账户标识',
  accessKeySecret: '账户秘钥',
  stsToken:'使用临时授权方式',
  region:'地区',
  bucket:'通过控制台或PutBucket创建的Bucket。'

})

stsToken生成方式参照 这里

3 在业务中使用（分片上传）

<!--
 * @Author: zhang_weidie
 * @LastEditors: zhang_weidie
 * @Date: 2021-10-09 14:52:40
 * @Description: oss 上传 
-->
<template>
  <div class="oss-uplaod">
    <el-upload
      :action="''"
      ref="upload"
      :on-success="fnUploadSuccess"
      :http-request="fnUploadRequest"
      drag
      multiple
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>
  </div>
</template>

<script>
const OSS = require('ali-oss')
//OSS 参数自行获取 下面为参考值
const client = new OSS({
  accessKeyId: 'STS.NTfJ7r3M7dAE1xfDMJfgDvH3w',
  accessKeySecret: 'G3F9922uRCQgvzwu4nyEui3mJLwpGiAr94F8t45cCtWe',
  stsToken:
    'CAIS/wF1q6Ft5B2yfSjIr5fTAY3G3pIW04OuM17XoE0fauhomY2YlTz2IHpLe3JoBO4csfk0mWhZ6vcelqxCVplmWBRBrGHxQNMFnzm6aq/t5uaXj9Vd+rDHdEGXDxnkprywB8zyUNLafNq0dlnAjVUd6LDmdDKkLTfHWN/z/vwBVNkMWRSiZjdrHcpfIhAYyPUXLnzML/2gQHWI6yjydBM551cm0zons/TjkpDFsEfk4QekmrNPlePYOYO5asRgBpB7Xuqu0fZ+Hqi7i3QPtEMSqfks0/EfpG+W4oDBGSpY5xSXLuzT6cZzKwx0YKc3HaNepeT7j+d/vuHDehxvVcvt6YoagAF2z/sT80UpXntXEJtlW8Z7jUOzM4qFMcD//oTfl2UD9TnIZnvtoefXwtLWGFGdquZ/REnAHj3OV4LaH91uwM5firSAHtnfTF62bksE3TE8oiOKXGtcrP24QST34dnbhFbVyQJjV376QW+zw1uwx/hYT3m/ZT+PmX2xPb4xNszGYw==',
  region: 'oss-cn-hangzhou',
  bucket: 'keketest1',
})
export default {
  name: 'ossupload',
  data() {
    return {
     
    }
  },
  methods: {
    async fnUploadRequest(file) {
      const that = this
      async function multipartUpload() {
        let temporary = file.file.name.lastIndexOf('.')
        let fileNameLength = file.file.name.length
        let fileFormat = file.file.name.substring(temporary + 1, fileNameLength)
        let fileName = file.file.name
        client
          .multipartUpload(`videoTest/${fileName}`, file.file, {
            progress: function (p) {
              //p进度条的值
              console.log(p)
            //   that.showProgress = true
            //   that.progress = Math.floor(p * 100)
            },
          })
          .then(result => {
            //上传成功返回值，可针对项目需求写其他逻辑
            console.log(result)
          })
          .catch(err => {
            console.log('err:', err)
          })
      }
      multipartUpload()
    },
    fnUploadSuccess(res) {
      console.log(res)
    },
  },
}
</script>

<style>
</style>

4 一些注意事项

1. 在调用client.multipartUpload方法的时候，不用去指定上传的域名，它会自动在上传地址前拼上当前Bucket的域名。如代码所示：videoTest/，OSS就会创建一个videoTest的目录，文件就会被自动上传到这个目录下；

2. 在第一次调用的时候，会遇到跨域问题，这里我们要先去后台设置下跨域：

3. 在分片上传的时候，在最后一个请求会出现这个报错：

需要在暴露 Headers设置ETag来解决分片最后一个请求报错的问题。