本文主要是介绍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，但是配置了也没解决，所有只能改变它的写法了，有大神知道为什么欢迎指出
这篇关于require中使用ali-oss上传视频采坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
