【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'
    })
  }
}
相关推荐
滿4 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年4 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程6 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏6 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows