分片上传视频到oss服务器

1. 安装阿里oss插件

npm install ali-oss --save

2. 话不多说上代码

<template>
  <div class="app-container">
    <el-row>
      <el-col :span='5' :offset='10'>
        <el-upload ref="upload" drag action="" accept='video/*' :limit='1' :auto-upload="false" :on-change="handleChange" :http-request="handleVideoUpload" :on-remove="handleRemove">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-progress :percentage="percentage" :status="uploadStatus" v-if='percentage>0 && percentage<=100'></el-progress>
      </el-col>

      <el-col :span='5' :offset='4'>
        <video :src="videoURL" v-if='videoURL' style="width:100%;height:100%" controls></video>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 引入ali-oss插件
let OSS = require('ali-oss')
const client = new OSS({
  //根据那你的Bucket地点来填写，例如：oss-cn-beijing
  region: 'oss-cn-xxxx',
  // 自己账户的accessKeyId
  accessKeyId: 'xxxxxxxxxxxxxxxxxxxx',
  //自己账户的accessKeySecret
  accessKeySecret: 'xxxxxxxxxxxxxxxxxxxx',
  // bucket名字  桶名称
  bucket: 'xxx-xxx',
})

export default {
  data() {
    return {
      // 需要上传的文件
      currFile: null,
      // checkpoint参数用于记录上传进度，断点续传上传时将记录的checkpoint参数传入即可。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
      tempCheckpoint: null,
      // 进度条上传状态 el-progress
      uploadStatus: null,
      // 进度条百分比
      percentage: 0,
      //Object所在Bucket的完整路径
      uploadName: '',
      //上传uploadId
      uploadId: '',

      // 视频预览地址
      videoURL: '',
    }
  },

  methods: {
    /**
     * @description: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用  function(file, fileList)   1.当文件上传的时候调用oss上传视频的方法
     * @param {*}
     * @return {*}
     */
    handleChange(file, fileList) {
      // 文件状态改变时，调用视频分片上传的方法
      this.currFile = file
      this.multipartUpload(file)
    },

    /**
     * @description: 文件列表移除文件时的钩子 function(file, fileList) 1.删除文件的时候对视频上传进行停止 ,进行数据的重置
     * @param {*}
     * @return {*}
     */
    handleRemove(file, fileList) {
      this.percentage = 0
      this.uploadStatus = null
      this.videoURL = ''
    },

    /**
     * @description: 自定义的视频上传方法
     * @param {*}
     * @return {*}
     */
    handleVideoUpload() {},

    /**
     * @description: 自定义视频上传的方法  分片上传
     * @param {*}
     * @return {*}
     */
    async multipartUpload(file) {
      try {
        // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
        // 您可以通过自定义文件名（例如exampleobject.txt）或目录（例如exampledir/exampleobject.txt）的形式，实现将文件上传到当前Bucket或Bucket中的指定目录。
        // file.name  文件名  videos/${file.name}  代表 上传到oss服务器上 videos文件夹下面
        // file.raw   文件流
        // progress   视频上传进度函数
        const result = await client.multipartUpload(`videos/${file.name}`, file.raw, {
          progress: (p, checkpoint) => {
            // checkpoint参数用于记录上传进度，断点续传上传时将记录的checkpoint参数传入即可。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
            this.tempCheckpoint = checkpoint

            // 取消或者停止所需的参数
            this.uploadId = checkpoint.uploadId
            this.uploadName = checkpoint.uploadName
            // 上传进度，由于p 是多位小数，所以保留一位小数
            this.percentage = parseFloat((p * 100).toFixed(1))
          },
          // 设置分片大小。默认值为1 MB，最小值为100 KB。我设置的是10M一个分片
          partSize: 1024 * 1024 * 10,
          meta: { year: Date.now(), time: Date.now() }, //这个地方可以添加一些我们的参数
          //自定义配置请求头
          headers: {
            'Content-Disposition': 'inline',
            'Content-Type': file.raw.type,
          },
          mime: file.raw.type,
        })

        const { res } = result
        if (res.statusCode === 200) {
          this.videoURL = res.requestUrls[0].split('?')[0]
        }
      } catch (e) {
        // 该监听放在断网的异常处理
        window.addEventListener('online', this.resumeUpload)
        // 捕获超时异常。
        if (e.code === 'ConnectionTimeoutError') {
          this.uploadStatus = 'exception'
        }
      }
    },

    /**
     * @description: 取消上传  关闭页面或者点击按钮手动取消上传
     * @param {*}
     * @return {*}
     */
    async abortMultipartUpload() {
      // 移除监听事件
      window.removeEventListener('online', this.resumeUpload)
      const name = this.uploadName // Object所在Bucket的完整路径。
      const uploadId = this.uploadId // 分片上传uploadId。
      await client.abortMultipartUpload(name, uploadId)

      // 取消之后 ，重置数据
      this.videoURL = ''
      this.percentage = 0
      this.uploadStatus = null
    },

    /**
     * @description: 恢复上传
     * @param {*}
     * @return {*}
     */
    async resumeUpload() {
      window.removeEventListener('online', this.resumeUpload)
      if (!this.tempCheckpoint) {
        return this.$message.error('请先上传')
      }
      this.uploadStatus = null
      // 重新调用分片上传
      this.multipartUpload(this.file)
    },
  },
}
</script>

3. 预览图片

   
   下载.jpg