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

2023-10-09 00:50

本文主要是介绍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上传视频采坑的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/169150

相关文章

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》:本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量:定义、赋值自定义变量:引用、修改、删

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》:本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma