問(wèn)題背景

最近上傳視頻的功能，突然炸了，兩年沒(méi)動(dòng)的代碼，突然不行遼，首次上傳成功，后面繼續(xù)上傳就可以，但凡有一次上傳失敗，再上傳文件就不行。

這里博主使用的是憑證上傳方式哈。

憑證上傳

官方文檔：Web（JavaScript）上傳SDK

查看了官方文檔，確實(shí)是提到了，如使用1.5.3之前版本重新上傳，請(qǐng)修改待上傳文件名稱，不要與上傳中斷的文件重名，避免報(bào)錯(cuò)。

項(xiàng)目使用的確實(shí)是1.5.0版本，所以我首先是把upload-sdk升級(jí)到了1.5.5

如果需要下載對(duì)應(yīng)版本，可以看這里：Javascript上傳SDK

upload-sdk升級(jí)之后，oss-sdk用的依然是6.8.0，這時(shí)候上傳還是不行，首次上傳可以成功，但是如果有重復(fù)名稱的文件，再次上傳，就會(huì)一直失敗，報(bào)404

升級(jí)版本

詢問(wèn)了阿里云技術(shù)人員，被告知1.5.5對(duì)應(yīng)的是6.17.1，所以又升級(jí)了oss-sdk。

更新了版本之后，如果是新文件，上傳和續(xù)傳沒(méi)問(wèn)題了，只是如果文件名字和之前的相同，上傳會(huì)報(bào)403，續(xù)傳會(huì)報(bào)404

這是緩存引起的，在new AliyunUpload.Vod({}) 的地方，新增個(gè) localCheckpoint: true ，并且把本地存儲(chǔ)清空，就可以了，或者也可以重命名文件。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-728469.html

代碼

createUploader (i) {
        let self = this
        let uploader = new AliyunUpload.Vod({
          timeout: 60000,
          partSize: 1048576, // 分片大小默認(rèn)1M，不能小于100K
          parallel: 5, // 并行上傳分片個(gè)數(shù)，默認(rèn)5
          retryCount: 3, // 網(wǎng)絡(luò)原因失敗時(shí)，重新上傳次數(shù)，默認(rèn)為3
          retryDuration: 2, // 網(wǎng)絡(luò)原因失敗時(shí)，重新上傳間隔時(shí)間，默認(rèn)為2秒
          region: "cn-shanghai", // 上傳到點(diǎn)播的地域
          userId: "190917894512121",
          localCheckpoint: true,//此參數(shù)是禁用服務(wù)端緩存，不影響斷點(diǎn)續(xù)傳
          // 開(kāi)始上傳
	  // 如果是 UploadAuth 上傳方式, 需要調(diào)用 uploader.setUploadAuthAndAddress 方法
          // 如果是 UploadAuth 上傳方式, 需要根據(jù) uploadInfo.videoId是否有值，調(diào)用點(diǎn)播的不同接口獲取uploadauth和uploadAddress
	  // 如果 uploadInfo.videoId 有值，調(diào)用刷新視頻上傳憑證接口，否則調(diào)用創(chuàng)建視頻上傳憑證接口
	  // 如果 uploadInfo.videoId 存在, 調(diào)用 刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)
          // 如果 uploadInfo.videoId 不存在,調(diào)用 獲取視頻上傳地址和憑證接口(https://help.aliyun.com/document_detail/55407.html)
          onUploadstarted: function (uploadInfo) {
            if (!uploadInfo.videoId) {
              uploadVideoAuthApi(self.vedioData[i]).then((res) => {
                self.uploadDisabled = true
                let { uploadAuth, uploadAddress, videoId } = res.data.operateCallBackObj;
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
                uploader.startUpload()
              })
            } else {
	      // 如果videoId有值，根據(jù)videoId刷新上傳憑證
              refreshUploadVideoAuthApi(uploadInfo.videoId).then(res => {
                let {uploadAuth, uploadAddress, videoId} = res.data.operateCallBackObj
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                uploader.startUpload()
              })
            }
          },
          // 文件上傳成功
          onUploadSucceed: function (uploadInfo) {
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            self.statusText = '文件上傳成功!'
          },
          // 文件上傳失敗
          onUploadFailed: function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
            self.statusText = '文件上傳失敗!'
          },
          // 取消文件上傳
          onUploadCanceled: function (uploadInfo, code, message) {
            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
            self.statusText = '文件已暫停上傳'
          },
          // 文件上傳進(jìn)度，單位：字節(jié), 可以在這個(gè)函數(shù)中拿到上傳進(jìn)度并顯示在頁(yè)面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            let progressPercent = Math.ceil(progress * 100)
            self.authProgress = progressPercent
            self.statusText = '文件上傳中...'
          },
          // 上傳憑證超時(shí)
          onUploadTokenExpired: function (uploadInfo) {
            // 上傳大文件超時(shí), 如果是上傳方式一即根據(jù) UploadAuth 上傳時(shí)
            // 需要根據(jù) uploadInfo.videoId 調(diào)用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)重新獲取 UploadAuth
            // 然后調(diào)用 resumeUploadWithAuth 方法, 這里是測(cè)試接口, 所以我直接獲取了 UploadAuth
            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
            axios.get(refreshUrl).then(({data}) => {
              let uploadAuth = data.UploadAuth
              uploader.resumeUploadWithAuth(uploadAuth)
              console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
            })
            self.statusText = '文件超時(shí)...'
          },
          // 全部文件上傳結(jié)束
          onUploadEnd: function (uploadInfo) {
            console.log("onUploadEnd: uploaded all the files")
            self.statusText = '文件上傳完畢'
          }
        })
   return uploader
}

到了這里，關(guān)于aliyun-oss-sdk阿里云OSS視頻上傳（斷點(diǎn)續(xù)傳）前端實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！