Using ali-oss to upload video pit in require

Keywords: Vue

Using ali-oss to upload video in require

Previous project trial vue framework, using ali-oss is no problem, the latest project trial require written, and then use ali-oss when there is a problem, when I upload video error, as follows:

The problem lies in the following code, as long as there are async / await these two will report errors, async / await official explanation is to want
Use it to synchronize asynchrony. But that's because it's wrong.

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

      // Suspension Partition Upload Method
      client.cancel()
      // Resume uploading
      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('fail')
              reject(e)
          }
      }
      resumeUpload()

Solution, rewrite the relevant async/await part of the code, as follows

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)
      });

come to an end

The complete code is as follows: The comment section is before rewriting

// Video uploading
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 example
  // Uploaded Documents
  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,
        //Cloud account AccessKey has all API access rights. It is recommended to follow Ali Cloud Security Best Practices and create and use STS for API access.
        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)
      //   }
      // }
      // // Start uploading
      // multipartUpload()

      // // Suspension Partition Upload Method
      // client.cancel()
      // // Restore upload
      // 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('failed')
      //         reject(e)
      //     }
      // }
      // resumeUpload()
    })
  }
})

I don't know why I didn't support async/await's grammatical report, or because I didn't find the fault of relying on the newspaper. I also found many solutions from the Internet. Some said that I didn't support grammar. I needed to use babel and Polyfill, but I didn't solve the configuration. All of them could only change their writing.

Posted by coops on Fri, 04 Oct 2019 17:24:54 -0700