【uniapp】获取上传视频的md5,适用于APP和H5

代码实现

APP端使用 uni.getFileInfo() 即可

H5环境需要安装spark-md5

git 复制代码
npm install spark-md5

封装的获取上传视频的md5方法

js 复制代码
import SparkMD5 from 'spark-md5'

/**
 * 用于获取视频的md5
 * @param {Object} e 要上传的文件
 * @param {Object} digestAlgorithm 取值	md5、sha1
 */
export function getFileInfo(e, digestAlgorithm = 'md5') {
  return new Promise((resolve, reject) => {
    // #ifdef APP
    uni.getFileInfo({
      filePath: e.tempFilePath,
      digestAlgorithm,
      success(res) {
        resolve(res)
      },
      fail(err) {
        console.log(`获取文件信息失败,返回空对象`)
        resolve({
          size: '',
          digest: null
        })
      }
    })
    // #endif

    // #ifdef H5
    try {
      let fileReader = new FileReader()
      let Spark = new SparkMD5.ArrayBuffer()
      fileReader.readAsArrayBuffer(e.tempFile)
      fileReader.onload = function (res) {
        Spark.append(res.target.result)
        let md5 = Spark.end()
        resolve({
          size: '',
          digest: md5
        })
      }
    } catch (error) {
      console.log('🚀 ~ 获取视频的md5 ~ error:', error)
      resolve({
        size: '',
        digest: null
      })
    }
    // #endif
  })
}

上传视频方法

js 复制代码
/**
 * 选取视频
 * @param {Object} event 选取的视频本地信息,包含路径等信息
 */
async afterReadVideo(e) {
  if (JSON.stringify(e) === '{}' || !e) {
    return
  }
  let self = this
  let videoDuration = e.duration
  let sizeMb = Number(e.size) / 1024 / 1024
  if (sizeMb > 1536) {
    return uni.showToast({
      title: '视频过大,不得超过1.5G',
      icon: 'none',
      duration: 1500
    })
  }
  // 视频是否截图完的flag
  self.uploadImgFinished = false
  self.uploadLoading = true

  let videoUrl = ''
  try {
    // 上传视频
    videoUrl = await uploadFile(e.tempFilePath, self.processingProgress)
    self.currVideoUrl = videoUrl
    self.videoImgUrl = videoUrl + '!/snapshot/point/00:00:00/format/png'
    // 获取视频的md5
    let fileInfo = await getFileInfo(e)
    self.videoMd5 = fileInfo.digest
    self.uploadLoading = false
    // 视频是否截图完的flag
    self.uploadImgFinished = true
    this.videoDuration = videoDuration
  } catch (err) {
    // 上传失败
    this.videoDuration = 0
    let msg = '上传失败,请稍后重试'
    if (self.uploadLoading) {
      msg = '上传已取消'
    }
    self.uploadLoading = false
    self.downloadTask = null
    uni.showToast({
      title: msg,
      icon: 'none'
    })
  }
}
相关推荐
San30.2 分钟前
深入理解 JavaScript OOP:从一个「就地编辑组件」看清封装、状态与原型链
开发语言·前端·javascript·ecmascript
郑州光合科技余经理6 分钟前
基于PHP:海外版同城O2O系统多语言源码解决方案
java·开发语言·git·spring cloud·uni-app·php·uniapp
AAA阿giao18 分钟前
JavaScript 原型与原型链:从零到精通的深度解析
前端·javascript·原型·原型模式·prototype·原型链
0***863331 分钟前
SQL Server2019安装步骤+使用+解决部分报错+卸载(超详细 附下载链接)
javascript·数据库·ui
烛阴38 分钟前
C#异常概念与try-catch入门
前端·c#
钮钴禄·爱因斯晨38 分钟前
# 企业级前端智能化架构:DevUI与MateChat融合实践深度剖析
前端·架构
摆烂工程师1 小时前
2025年12月最新的 Google AI One Pro 1年会员教育认证通关指南
前端·后端·ai编程
Gavin在路上1 小时前
DDD之用事件风暴重构“电商订单履约”(11)
java·前端·重构
我命由我123451 小时前
VSCode - VSCode 颜色值快速转换
前端·ide·vscode·前端框架·编辑器·html·js
前端涂涂1 小时前
怎么设计一个加密货币 谁有权利发行数字货币 怎么防止double spending attack 怎么验证交易合法性 铸币交易..
前端