【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'
    })
  }
}
相关推荐
a濯1 小时前
element plus el-table多选框跨页多选保留
javascript·vue.js
蓝婷儿1 小时前
前端面试每日三题 - Day 32
前端·面试·职场和发展
星空寻流年2 小时前
CSS3(BFC)
前端·microsoft·css3
九月TTS2 小时前
开源分享:TTS-Web-Vue系列:Vue3实现固定顶部与吸顶模式组件
前端·vue.js·开源
gys98952 小时前
android studio开发aar插件,并用uniapp开发APP使用这个aar
android·uni-app·android studio
H309192 小时前
vue3+dhtmlx-gantt实现甘特图展示
android·javascript·甘特图
CodeCraft Studio2 小时前
数据透视表控件DHTMLX Pivot v2.1发布,新增HTML 模板、增强样式等多个功能
前端·javascript·ui·甘特图
一把年纪学编程2 小时前
【牛马技巧】word统计每一段的字数接近“字数统计”
前端·数据库·word
llc的足迹3 小时前
el-menu 折叠后小箭头不会消失
前端·javascript·vue.js
九月TTS3 小时前
TTS-Web-Vue系列:移动端侧边栏与响应式布局深度优化
前端·javascript·vue.js