Using ali-oss to upload video in require
Previous project trial vue framework, using ali-oss is no problem, the latest project trial require written, and then use ali-oss when there is a problem, when I upload video error, as follows:
The problem lies in the following code, as long as there are async / await these two will report errors, async / await official explanation is to want
Use it to synchronize asynchrony. But that's because it's wrong.
async function multipartUpload() { try { let result = await client.multipartUpload(uploadUrl + name, file, { progress: async function (p, checkpoint) { tempCheckpoint = checkpoint } }) } catch (e) { console.log(e) } } //Start uploading multipartUpload() // Suspension Partition Upload Method client.cancel() // Resume uploading 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('fail') reject(e) } } resumeUpload()
Solution, rewrite the relevant async/await part of the code, as follows
client.multipartUpload(`${uploadUrl}${name}`, file, { progress: (p, checkPoint) => { tempCheckpoint = checkPoint; vm.$emit('videochange', p) console.log(p) } }).then(res => { res.duration = duration res.size = size res.path = res.res.requestUrls[0].split('?')[0] resolve(res) }).catch(err => { reject(err) });
come to an end
The complete code is as follows: The comment section is before rewriting // Video uploading 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 example // Uploaded Documents return function (vm, file) { const videoUrl = URL.createObjectURL(file) const audioElement = new Audio(videoUrl) let duration let size = file.size audioElement.addEventListener("loadedmetadata", function (_event) { duration = audioElement.duration }) let tempCheckpoint return new Promise((resolve, reject) => { const ossConf = { endpoint, //Cloud account AccessKey has all API access rights. It is recommended to follow Ali Cloud Security Best Practices and create and use STS for API access. accessKeyId, accessKeySecret, bucket } let client = new aliOss(ossConf) console.log('client', client) const fileName = file.name const fileArr = fileName.split('.') const suffix = fileArr[fileArr.length - 1] const name = file.uid + '.' + suffix client.multipartUpload(`${uploadUrl}${name}`, file, { progress: (p, checkPoint) => { tempCheckpoint = checkPoint; vm.$emit('videochange', p) console.log(p) } }).then(res => { res.duration = duration res.size = size res.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) // } // } // // Start uploading // multipartUpload() // // Suspension Partition Upload Method // client.cancel() // // Restore upload // 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('failed') // reject(e) // } // } // resumeUpload() }) } })
I don't know why I didn't support async/await's grammatical report, or because I didn't find the fault of relying on the newspaper. I also found many solutions from the Internet. Some said that I didn't support grammar. I needed to use babel and Polyfill, but I didn't solve the configuration. All of them could only change their writing.