• electron:2.通过COS上传视频video


    1.点击文件按钮图标,判断上传文件类型:图片、视频、文件

    1. // 发送文件入口
    2. async sendFile() {
    3. const imageType = ['jpg', 'png', 'jpeg']
    4. const videoType = ['mkv', 'avi', 'mp4']
    5. const options = {
    6. filters: [
    7. { name: 'Images', extensions: imageType },
    8. { name: 'Videos', extensions: videoType },
    9. { name: 'Files', extensions: ['zip', 'rar'] }
    10. ]
    11. }
    12. const result = await dialog.showOpenDialog(options)
    13. if (!result.canceled && result.filePaths) {
    14. const filePaths = result.filePaths[0]
    15. const isImage = imageType.some((e) => filePaths.endsWith(e))
    16. const isVideo = videoType.some((e) => filePaths.endsWith(e))
    17. if (isImage) {
    18. this.sendImage(result)
    19. } else {
    20. this.sendVideo(result, isVideo)
    21. }
    22. }
    23. }

    2.通过COS 上传demo

    1. async sendFile(result, isVideo) {
    2. const filePaths = result.filePaths[0]
    3. const pathArr = filePaths.split(/\\/)
    4. const fileName = pathArr[pathArr.length - 1]
    5. const path = filePaths.replace(/\\/g, '/')
    6. const file = await this.srcToFile(path, fileName)
    7. const fileContentType = /\.zip$/.test(fileName)
    8. ? 'application/x-zip-compressed'
    9. : 'application/x-rar-compressed'
    10. let keyPath = `${common.isUat() ? 'pathUat' : 'pathProd'}`
    11. let data_taskId = ''
    12. this.cos.uploadFile(
    13. {
    14. Bucket,
    15. Region,
    16. Key: keyPath + fileName,
    17. ContentType: isVideo ? 'video/mp4' : fileContentType,
    18. Body: file,
    19. SliceSize: 1024 * 1024 * 5,
    20. onTaskReady: (taskId) => {
    21. data_taskId = `[data-taskId=${taskId}]`
    22. if (isVideo) {
    23. const fs = require('fs')
    24. const videoData = fs.readFileSync(path)
    25. const url = `data:video/mp4;base64,${videoData.toString('base64')}` // 获取本地视频的地址在页面显示
    26. let audioElement = new Audio(URL.createObjectURL(file))
    27. audioElement.addEventListener('loadedmetadata', (_event) => {
    28. let duration = common.formatDuraton(Math.floor(audioElement.duration)) // 获取视频时长
    29. console.log(duration);
    30. })
    31. }
    32. },
    33. onProgress: (info) => {
    34. console.log('onProgress', JSON.stringify(info))
    35. var percent = Math.floor(info.percent * 10000) / 100
    36. var speed = Math.floor((info.speed / 1024 / 1024) * 100) / 100
    37. console.log('进度:' + percent + '%; 速度:' + speed + 'Mb/s;')
    38. }
    39. },
    40. (err, data) => {
    41. if (err) {
    42. console.log('上传出错', err)
    43. } else {
    44. console.log('上传成功', data)
    45. }
    46. }
    47. )
    48. }

    3.根据本地路径创建文件对象

    1. // 根据本地路径创建文件对象
    2. srcToFile(src, fileName, mimeType) {
    3. return fetch(src)
    4. .then(function (res) {
    5. return res.arrayBuffer()
    6. })
    7. .then(function (buf) {
    8. return new File([buf], fileName)
    9. })
    10. }

  • 相关阅读:
    花5分钟写个 grpc 微服务架构吧
    SpringBatch入门
    godoc安装与go文档查询
    代谢网络模型学习笔记(序章)
    Mybatis之动态sql和分页
    Spring实例化源码解析之循环依赖CircularReference(十三)
    Redis Java整合
    量化交易全流程(七)
    从0开始搭建ELK日志收集系统
    详解编译和链接!
  • 原文地址:https://blog.csdn.net/weixin_49015558/article/details/133276228