阿里云视频点播上传BOB数据或者Base64数据

最新推荐文章于 2024-12-25 14:33:52 发布

原创最新推荐文章于 2024-12-25 14:33:52 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

OSS 同时被 2 个专栏收录

5 篇文章

订阅专栏

视频点播

2 篇文章

订阅专栏

本文展示了如何使用阿里云点播服务的JavaScript SDK进行文件上传，包括创建上传对象、处理上传过程中的各种事件、使用UploadAuth上传方式以及如何在上传过程中处理超时和断点续传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

别的不多说，直接上传代码

    $(document).ready(function () {
      /** 
       * 创建一个上传对象
       * 使用 UploadAuth 上传方式
       */
      function createUploader () {
        var uploader = new AliyunUpload.Vod({
          timeout: $('#timeout').val() || 60000,
          partSize: $('#partSize').val() || 1048576,
          parallel: $('#parallel').val() || 5,
          retryCount: $('#retryCount').val() || 3,
          retryDuration: $('#retryDuration').val() || 2,
          region: $('#region').val(),
          userId: $('#userId').val(),
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            console.log('addFileSuccess')
            $('#authUpload').attr('disabled', false)
            $('#resumeUpload').attr('disabled', false)
            $('#status').text('添加文件成功, 等待上传...')
            console.log("addFileSuccess: " + uploadInfo.file.name)
          },
          // 开始上传
          onUploadstarted: function (uploadInfo) {
            // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
            // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
            // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
            // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
            // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
            // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
            if (!uploadInfo.videoId) {
              var createUrl = 'http://localhost:8080/api/ali/1000066766/FREESTYLE'
              $.get(createUrl, function (data) {
               	var uploadAuth = data.data.uploadAuth;
				var uploadAddress = data.data.uploadAddress;
				var videoId = data.data.videoId;
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
              }, 'json')
              $('#status').text('文件开始上传...')
              console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            } else {
              // 如果videoId有值，根据videoId刷新上传凭证
              // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
              var refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
              $.get(refreshUrl, function (data) {
                var uploadAuth = data.UploadAuth
                var uploadAddress = data.UploadAddress
                var videoId = data.VideoId
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
              }, 'json')
            }
          },
          // 文件上传成功
          onUploadSucceed: function (uploadInfo) {
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            $('#status').text('文件上传成功!')
          },
          // 文件上传失败
          onUploadFailed: function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
            $('#status').text('文件上传失败!')
          },
          // 取消文件上传
          onUploadCanceled: function (uploadInfo, code, message) {
            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
            $('#status').text('文件上传已暂停!')
          },
          // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            var progressPercent = Math.ceil(progress * 100)
            $('#auth-progress').text(progressPercent)
            $('#status').text('文件上传中...')
          },
          // 上传凭证超时
          onUploadTokenExpired: function (uploadInfo) {
            // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
            // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
            // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
            $('#status').text('文件上传超时!')

            let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
            $.get(refreshUrl, function (data) {
              var uploadAuth = data.UploadAuth
              uploader.resumeUploadWithAuth(uploadAuth)
              console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
            }, 'json')
          },
          // 全部文件上传结束
          onUploadEnd: function (uploadInfo) {
            $('#status').text('文件上传完毕!')
            console.log("onUploadEnd: uploaded all the files")
          }
        })
        return uploader
      }

      var uploader = null
var blob = dataURLtoBlob('data:video/webm;base64,GkXfo6NChoEBQveBAULygQRC84EIQoKIbWF0cm9za2FCh4EEQoWBAhhTgGcB/////////xVJqWaZKtexgw9CQE2AhkNocm9tZVdBhkNocm9tZRZUrmutrqvXgQFzxYfuh2S8yPWFg4EBho9WX01QRUc0L0lTTy9BVkPgiLCCAeC6ggFoH0O2dQH/////////54EAo1k0gQAAgAAAAAFnQsAfjI1A8F7ywDwiEagAAAABaM48gAAAAAFluAAEAAB///4eigACBB5MXJycnJycnJycnJycnJycnJycnJycnJycnJycnJ1i6666666666666666666666666666666666666666666666666666666666666666666666666647//5PXXXXXXXXXXXXXXXXXXXXXXXXXXXXXyhMTtD4S8vFf9OkV8FhPx2lkddddddddddddddddddddddddddf//wghwACbyCRz8hHPf5O4kJGOtKwAHeSBVfcL4R5/gAHKt18PNspi/gWfgHlMQuEPwctJmzam/4+//tEen5/yMD7MhVkaMDBPXiQrE4+gt9hOBIaIUlyUflIZ3wMN13zf//2h+AAEBa217ZtjXqWr//QWXqm8tGcbwYGTv/Emrlxpr/979V9PokZP/qNyKFfAAbJm0JsrqicABsmbQmylVmXUCezX/fpv/dgarbdrNK/38D/4+sYZjymcsAnZs2x5PgUldd/d/wITeB3RIqG//7/zJ/4T+wQfgBYAyvustHw9euuuuuuuuuuuuuuuuuuuuuv+jpZgIZ34ADmymal/UPxgYT/QAbXGjErKer1Yeb9/a4TfShjguqLmv9x4S+mTauV5/gAPDWdAlTsyWcAw/UiIkImQiMyf6KcZaNEahrciY2D0/f+Y/Od+iMTkTaeVYb9kYrv/8AC2Qv6twbiy3fdgTNEn/PnI/9szWbeP88h4DFiFUMiivu5J/7NGDzQdeRNRl/3/nguVO/X0rn/gwXyl/gALi4L4EjWXj+Blp2K47ATa9+f4TVs5pyv3/v7ULxzFcE/G4Q8tR//OBNwO/G98Gf/fAAeGsu9zU5yb8C7DzWJXl9v+FX10oRwvgha29KhAVrCy9AqJDZ2GwusQwfgAUQF5fxJ/p4j/9h9BlQ1yCCf4/hP4AJgqzJqkmf/5oIwtHdl7IrmPFTTMAFs1cgAIFi7aUnrrrrrrrrrrrrrrrrrrrr/kz+g8KYADtKAFw+7leFQIwAFsgF4sL7KR9/wKBLJuNQ2JS//flpl/EuLjFDh+3CXCoaQ8pp6vf4ARSzhM6sbtQw2H0K52oAXFN/Y6kbd//+ALQ6nTUXWd774rAAJUCGDxNwI5/uoH+26QTy9SOCzAYG9A3t8J8GAAWwHgcAAvQMCFrwBT9GKi4CdioCvPmtFOfzgmf6AVa8hwXAQOfgd6ywPAndYS7uT0LV+lBYirtb3X/t4YBI/XtgiwLvY5wDcLvAV0yHI7EUnfASTvEkih9IIf+21nBYi3Ry/77gNKpEU4SKWz7/gTDy+AA99gki+noj6uoHJ7tie75f+Ee5/9TCNZImLH8DBa57b8yP7AQmmpr13//w8CVJZfpPH///8VhJukUN/6hTD4APlA/1i1X+/9+uiR///7k8K+ACjaCQp+QxXAARQSCloqWISATc4Du+IlP+7SSISSaZ3X9lA+C51x/3jrw7MGqw//z3yoWS1kCX20AKP4V0gne99xQdU34LjUyKsu8K5bt/5gK54dgCWLHOL1RNIjdDMCA');
		var file = new File([blob],"111.mp4");
        var Title = "111.mp4"
        var userData = '{"Vod":{}}'
        if (uploader) {
          uploader.stopUpload()
          $('#auth-progress').text('0')
          $('#status').text("")
        }
        uploader = createUploader()
        // 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
        console.log(uploader)
        uploader.addFile(file, null, null, null, userData)
        $('#authUpload').attr('disabled', false)
        $('#pauseUpload').attr('disabled', true)
        $('#resumeUpload').attr('disabled', true)
      $('#fileUpload').on('change', function (e) {
        //var file = e.target.files[0]
        //if (!file) {
         // alert("请先选择需要上传的文件!")
         // return
        //}
		
      })

      // 第一种方式 UploadAuth 上传 
      $('#authUpload').on('click', function () {
        // 然后调用 startUpload 方法, 开始上传
        if (uploader !== null) {
          uploader.startUpload()
          $('#authUpload').attr('disabled', true)
          $('#pauseUpload').attr('disabled', false)
        }
      })

      // 暂停上传
      $('#pauseUpload').on('click', function () {
        if (uploader !== null) {
          uploader.stopUpload()
          $('#resumeUpload').attr('disabled', false)
          $('#pauseUpload').attr('disabled', true)
        }
      })


      $('#resumeUpload').on('click', function () {
        if (uploader !== null) {
          uploader.startUpload()
          $('#resumeUpload').attr('disabled', true)
          $('#pauseUpload').attr('disabled', false)
        }
      })
	function dataURLtoBlob(dataurl) {
		var arr = dataurl.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		return new Blob([ u8arr ], {
			type : mime
		});
	}
    })

核心代码：

var file = new File([blob],"111.mp4");

	function dataURLtoBlob(dataurl) {
		var arr = dataurl.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		return new Blob([ u8arr ], {
			type : mime
		});
	}