require中使用ali-oss上传视频采坑

require中使用ali-oss上传视频

  • 之前项目试vue框架,使用ali-oss没问题,最近一个项目试require写的,然后使用ali-oss时候就有问题了,在我上传视频的时候报错了,如下:

之前项目试vue框架,使用ali-oss没问题,最近一个项目试require写的,然后使用ali-oss时候就有问题了,在我上传视频的时候报错了,如下:

require中使用ali-oss上传视频采坑_第1张图片

问题出在以下代码,只要有async / await 这俩就会报错,async / await官方给出的解释是想要
使用它来使异步变为同步。但是就因为这个会报错

async function multipartUpload() {
        try {
          let result = await client.multipartUpload(uploadUrl + name, file, {
            progress: async function (p, checkpoint) {
              tempCheckpoint = checkpoint
            }
          })
        } catch (e) {
          console.log(e)
        }
      }
      //开始上传
      multipartUpload()

      // 暂停分片上传方法
      client.cancel()
      // 恢复上传
      const resumeclient = new aliOss(ossConf)
      async function resumeUpload() {
          try {
              let result = await client.multipartUpload(uploadUrl + name, file, {
                  progress: async function(p, checkpoint) {
                      tempCheckpoint = checkpoint
                      vm.$emit('videochange', p)
                  },
                  checkpoint: tempCheckpoint
              })
              result.duration = duration
              result.size = size
              console.log(result, 'result')
              result.path = result.res.requestUrls[0].split('?')[0]
              resolve(result)
          } catch(e) {
              console.log(e)
              console.log('失败')
              reject(e)
          }
      }
      resumeUpload()

解决方法,重写相关async/await 部分代码,如下

client.multipartUpload(`${uploadUrl}${name}`, file, {
        progress: (p, checkPoint) => {
          tempCheckpoint = checkPoint;
          vm.$emit('videochange', p)
          console.log(p)
        }
      }).then(res => {
        res.duration = duration
        res.size = size
        res.path = res.res.requestUrls[0].split('?')[0]
        resolve(res)
      }).catch(err => {
        reject(err)
      });

完事儿

完整代码如下:注释部分就是改写之前的

// 视频上传
define([
  "config/aliOssConfig",
  "aliOss",
], function (
  aliOssConfig,
  aliOss
) {
  console.log(aliOssConfig);
  console.log(aliOss);

  const uploadUrl = 'video/';
  let endpoint = aliOssConfig.oXiaohe.endpoint;
  let accessKeyId = aliOssConfig.oXiaohe.accessKeyId;
  let accessKeySecret = aliOssConfig.oXiaohe.accessKeySecret;
  let bucket = aliOssConfig.oXiaohe.bucket;
  // vue 实例
  // 上传的文件
  return function (vm, file) {
    const videoUrl = URL.createObjectURL(file)
    const audioElement = new Audio(videoUrl)
    let duration
    let size = file.size
    audioElement.addEventListener("loadedmetadata", function (_event) {
      duration = audioElement.duration
    })
    let tempCheckpoint
    return new Promise((resolve, reject) => {
      const ossConf = {
        endpoint,
        //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,创建并使用STS方式来进行API访问
        accessKeyId,
        accessKeySecret,
        bucket
      }
      let client = new aliOss(ossConf)
      console.log('client', client)
      const fileName = file.name
      const fileArr = fileName.split('.')
      const suffix = fileArr[fileArr.length - 1]
      const name = file.uid + '.' + suffix
      client.multipartUpload(`${uploadUrl}${name}`, file, {
        progress: (p, checkPoint) => {
          tempCheckpoint = checkPoint;
          vm.$emit('videochange', p)
          console.log(p)
        }
      }).then(res => {
        res.duration = duration
        res.size = size
        res.path = res.res.requestUrls[0].split('?')[0]
        resolve(res)
      }).catch(err => {
        reject(err)
      });
      // async function multipartUpload() {
      //   try {
      //     let result = await client.multipartUpload(uploadUrl + name, file, {
      //       progress: async function (p, checkpoint) {
      //         tempCheckpoint = checkpoint
      //       }
      //     })
      //   } catch (e) {
      //     console.log(e)
      //   }
      // }
      // //开始上传
      // multipartUpload()

      // // 暂停分片上传方法
      // client.cancel()
      // // 恢复上传
      // const resumeclient = new aliOss(ossConf)
      // async function resumeUpload() {
      //     try {
      //         let result = await client.multipartUpload(uploadUrl + name, file, {
      //             progress: async function(p, checkpoint) {
      //                 tempCheckpoint = checkpoint
      //                 vm.$emit('videochange', p)
      //             },
      //             checkpoint: tempCheckpoint
      //         })
      //         result.duration = duration
      //         result.size = size
      //         console.log(result, 'result')
      //         result.path = result.res.requestUrls[0].split('?')[0]
      //         resolve(result)
      //     } catch(e) {
      //         console.log(e)
      //         console.log('失败')
      //         reject(e)
      //     }
      // }
      // resumeUpload()
    })
  }
})

大神勿喷,到此我也不清楚是因为不支持async/await相关语法报的错,还是因为这样写了没有找到依赖报的错,也从网上找了很多解决方案,有的说是不支持语法,需要利用babel和Polyfill,但是配置了也没解决,所有只能改变它的写法了,有大神知道为什么欢迎指出

你可能感兴趣的:(require)