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


原文地址:https://blog.csdn.net/weixin_44696379/article/details/100515076
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/169150

相关文章

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》:本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法,没有

MyBatis ParameterHandler的具体使用

《MyBatisParameterHandler的具体使用》本文主要介绍了MyBatisParameterHandler的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、概述二、源码1 关键属性2.setParameters3.TypeHandler1.TypeHa

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识:Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方

sky-take-out项目中Redis的使用示例详解

《sky-take-out项目中Redis的使用示例详解》SpringCache是Spring的缓存抽象层,通过注解简化缓存管理,支持Redis等提供者,适用于方法结果缓存、更新和删除操作,但无法实现... 目录Spring Cache主要特性核心注解1.@Cacheable2.@CachePut3.@Ca

C#下Newtonsoft.Json的具体使用

《C#下Newtonsoft.Json的具体使用》Newtonsoft.Json是一个非常流行的C#JSON序列化和反序列化库,它可以方便地将C#对象转换为JSON格式,或者将JSON数据解析为C#对... 目录安装 Newtonsoft.json基本用法1. 序列化 C# 对象为 JSON2. 反序列化

RabbitMQ 延时队列插件安装与使用示例详解(基于 Delayed Message Plugin)

《RabbitMQ延时队列插件安装与使用示例详解(基于DelayedMessagePlugin)》本文详解RabbitMQ通过安装rabbitmq_delayed_message_exchan... 目录 一、什么是 RabbitMQ 延时队列? 二、安装前准备✅ RabbitMQ 环境要求 三、安装延时队

Python ORM神器之SQLAlchemy基本使用完全指南

《PythonORM神器之SQLAlchemy基本使用完全指南》SQLAlchemy是Python主流ORM框架,通过对象化方式简化数据库操作,支持多数据库,提供引擎、会话、模型等核心组件,实现事务... 目录一、什么是SQLAlchemy?二、安装SQLAlchemy三、核心概念1. Engine(引擎)

Java Stream 并行流简介、使用与注意事项小结

《JavaStream并行流简介、使用与注意事项小结》Java8并行流基于StreamAPI,利用多核CPU提升计算密集型任务效率,但需注意线程安全、顺序不确定及线程池管理,可通过自定义线程池与C... 目录1. 并行流简介​特点:​2. 并行流的简单使用​示例:并行流的基本使用​3. 配合自定义线程池​示