钉钉小程序直传文件到 阿里云OSS

举个🌰,用钉钉小程序将一段视频在 前端 直接传到阿里云上。

由于 js-base64 这个npm包在钉钉小程序使用不了,而目前钉钉小程序又没有base64ToArrayBuffer这类方法,故只能曲线救国,使用 dd.writeFiledd.readFile来做base64的转换。

首先,我们得先处理OSS配置,具体如下:

js 复制代码
import crypto from "crypto-js"

const OSSConfig = {
  AccessKeyId: "xxxx",
  AccessKeySecret: "xxxxxx",
  Host: "xxxxx", // 具体某个账号下,
  SecurityToken: "xx", // 可选,使用STS签名时必传。
}

// 计算签名。
const computeSignature = (accessKeySecret, canonicalString) => {
  return crypto.enc.Base64.stringify(
    crypto.HmacSHA1(canonicalString, accessKeySecret)
  )
}

let ossData = null
const getOssConfig = () => {
  const date = new Date()
  date.setHours(date.getHours() + 24) //加 1个小时
  const policyText = {
    expiration: date.toISOString(), // 设置policy过期时间。
    conditions: [
      // 限制上传大小。
      ["content-length-range", 0, 1024 * 1024 * 1024],
    ],
  }
  let fileManager = dd.getFileSystemManager()
  fileManager.writeFile({
    filePath: `${dd.env.USER_DATA_PATH}/test.txt`,
    data: JSON.stringify(policyText),
    success: () => {
      fileManager.readFile({
        filePath: `${dd.env.USER_DATA_PATH}/test.txt`,
        encoding: "base64",
        success: (res) => {
          console.log(res.data, "readFile")
          const signature = computeSignature(
            OSSConfig.AccessKeySecret,
            res.data
          )
          ossData = {
            OSSAccessKeyId: OSSConfig.AccessKeyId,
            signature,
            policy: res.data,
            // "x-oss-security-token": OSSConfig.SecurityToken,
          }
        },
        fail: (err) => {
          console.log(err)
        },
      })
    },
    fail: (err) => {
      console.log(err)
    },
  })
}

这个ossData就是我们处理好后的配置项,接下来将其填充到 dd.uploadFile 里就大功告成了!

js 复制代码
dd.chooseVideo({
        sourceType: ["album", "camera"],
        maxDuration: 60,
        success: (res) => {
          let uniqueId = `${dirPath}xcx-${new Date().getTime()}.mp4` // dirPath为存储的文件夹路径, 比如"dev/front-end/video/"
          uni.showLoading({
            title: "视频上传中...",
          })
          dd.uploadFile({
            url: OSSConfig.Host,
            fileType: "video",
            fileName: "file",
            formData: {
              ...ossData, // 上述getOssConfig方法得到的结果
              key: uniqueId, // 该值为你存在在oss上的位置  后面上传成功之后拼接得到链接需要使用
              success_action_status: "200", // 默认上传成功状态码为204,此处被success_action_status设置为200。
            },
            filePath: res.tempFilePath,
            success: (res) => {
              uni.hideLoading()
              console.log("视频上传成功,地址为:",`${OSSConfig.Host}/${uniqueId}`)
            },
            fail: (err) => {
              uni.hideLoading()
            },
          })
        },
        fail: (err) => {
          console.log(err)
        },
      })

欢迎小伙伴留言讨论,互相学习!

❤❤❤ 如果对你有帮助,记得点赞收藏哦!❤❤❤

相关推荐
WebGISer_白茶乌龙桃8 小时前
Cesium实现“悬浮岛”式,三维立体的行政区划
javascript·vue.js·3d·web3·html5·webgl
小Tomkk8 小时前
⭐️ StarRocks Web 使用介绍与实战指南
前端·ffmpeg
计算机学姐8 小时前
基于SpringBoot的汽车租赁系统【个性化推荐算法+数据可视化统计】
java·vue.js·spring boot·后端·spring·汽车·推荐算法
不一样的少年_8 小时前
产品催: 1 天优化 Vue 官网 SEO?我用这个插件半天搞定(不重构 Nuxt)
前端·javascript·vue.js
-dcr8 小时前
50.智能体
前端·javascript·人工智能·ai·easyui
BingoGo8 小时前
免费可商用商业级管理后台 CatchAdmin V5 正式发布 插件化与开发效率的全面提升
vue.js·后端·php
行者968 小时前
Flutter跨平台开发适配OpenHarmony:进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙
云和数据.ChenGuang8 小时前
Uvicorn 是 **Python 生态中用于运行异步 Web 应用的 ASGI 服务器**
服务器·前端·人工智能·python·机器学习
IT_陈寒8 小时前
SpringBoot 3.0实战:这5个新特性让你的开发效率提升50%
前端·人工智能·后端
遗憾随她而去.8 小时前
Webpack 面试题
前端·webpack·node.js