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

相关文章

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

使用国内镜像源优化pip install下载的方法步骤

《使用国内镜像源优化pipinstall下载的方法步骤》在Python开发中,pip是一个不可或缺的工具,用于安装和管理Python包,然而,由于默认的PyPI服务器位于国外,国内用户在安装依赖时可... 目录引言1. 为什么需要国内镜像源?2. 常用的国内镜像源3. 临时使用国内镜像源4. 永久配置国内镜

Go语言中最便捷的http请求包resty的使用详解

《Go语言中最便捷的http请求包resty的使用详解》go语言虽然自身就有net/http包,但是说实话用起来没那么好用,resty包是go语言中一个非常受欢迎的http请求处理包,下面我们一起来学... 目录安装一、一个简单的get二、带查询参数三、设置请求头、body四、设置表单数据五、处理响应六、超

如何使用C#串口通讯实现数据的发送和接收

《如何使用C#串口通讯实现数据的发送和接收》本文详细介绍了如何使用C#实现基于串口通讯的数据发送和接收,通过SerialPort类,我们可以轻松实现串口通讯,并结合事件机制实现数据的传递和处理,感兴趣... 目录1. 概述2. 关键技术点2.1 SerialPort类2.2 异步接收数据2.3 数据解析2.

详解如何使用Python提取视频文件中的音频

《详解如何使用Python提取视频文件中的音频》在多媒体处理中,有时我们需要从视频文件中提取音频,本文为大家整理了几种使用Python编程语言提取视频文件中的音频的方法,大家可以根据需要进行选择... 目录引言代码部分方法扩展引言在多媒体处理中,有时我们需要从视频文件中提取音频,以便进一步处理或分析。本文

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带