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

require中使用ali-oss上传视频

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

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

问题出在以下代码，只要有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 = checkpointvm.$emit('videochange', p)},checkpoint: tempCheckpoint})result.duration = durationresult.size = sizeconsole.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 = durationres.size = sizeres.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 durationlet size = file.sizeaudioElement.addEventListener("loadedmetadata", function (_event) {duration = audioElement.duration})let tempCheckpointreturn 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.nameconst fileArr = fileName.split('.')const suffix = fileArr[fileArr.length - 1]const name = file.uid + '.' + suffixclient.multipartUpload(`${uploadUrl}${name}`, file, {progress: (p, checkPoint) => {tempCheckpoint = checkPoint;vm.$emit('videochange', p)console.log(p)}}).then(res => {res.duration = durationres.size = sizeres.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，但是配置了也没解决，所有只能改变它的写法了，有大神知道为什么欢迎指出

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！