【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'
    })
  }
}
相关推荐
yqcoder12 分钟前
Commander 一款命令行自定义命令依赖
前端·javascript·arcgis·node.js
前端Hardy28 分钟前
HTML&CSS :下雪了
前端·javascript·css·html·交互
醉の虾35 分钟前
VUE3 使用路由守卫函数实现类型服务器端中间件效果
前端·vue.js·中间件
码上飞扬1 小时前
Vue 3 30天精进之旅:Day 05 - 事件处理
前端·javascript·vue.js
火烧屁屁啦2 小时前
【JavaEE进阶】应用分层
java·前端·java-ee
程序员小寒2 小时前
由于请求的竞态问题,前端仔喜提了一个bug
前端·javascript·bug
赵不困888(合作私信)3 小时前
npx和npm 和pnpm的区别
前端·npm·node.js
很酷的站长4 小时前
一个简单的自适应html5导航模板
前端·css·css3
python算法(魔法师版)6 小时前
React应用深度优化与调试实战指南
开发语言·前端·javascript·react.js·ecmascript
阿芯爱编程10 小时前
vue3 vue2区别
前端·javascript·vue.js