uni-app 建议推出视频转base64插件

虽然uni-app官方可能尚未直接推出将视频转为Base64编码的插件，但我们可以通过编写自定义插件或使用现有的JavaScript库来实现这一功能。以下是一个基于uni-app框架和HTML5的FileReader API的示例代码，用于将视频文件转换为Base64编码的字符串。请注意，这种方法适用于小视频文件，因为Base64编码会增加数据大小约33%，并且处理大文件可能会消耗较多内存和时间。

1. 创建自定义组件或页面

首先，在uni-app项目中创建一个新的页面或组件，例如VideoToBase64.vue。

<template>
  <view>
    <button @click="chooseVideo">选择视频</button>
    <video v-if="videoSrc" :src="videoSrc" controls></video>
    <text v-if="base64String" style="white-space: pre-wrap;">{{ base64String }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '',
      base64String: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back',
        success: (res) => {
          this.videoSrc = res.tempFilePath;
          this.convertToBase64(res.tempFilePath);
        },
        fail: (err) => {
          console.error('选择视频失败', err);
        }
      });
    },
    convertToBase64(filePath) {
      uni.getFileSystemManager().readFile({
        filePath: filePath,
        encoding: 'base64',
        success: (res) => {
          this.base64String = 'data:video/mp4;base64,' + res.data;
        },
        fail: (err) => {
          console.error('文件读取失败', err);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 添加必要的样式 */
</style>

2. 使用说明

• 将上述代码保存为VideoToBase64.vue。
• 在pages.json中注册该页面。
• 运行uni-app项目，访问该页面。
• 点击“选择视频”按钮，选择一个视频文件。
• 页面将显示视频预览，并在下方显示Base64编码的字符串。

注意事项

• 由于Base64编码的数据体积较大，对于大视频文件，建议采用更高效的存储和传输方式，如直接上传至服务器。
• 上述代码示例适用于uni-app框架，并依赖于HTML5的FileReader API和uni-app的文件系统API。
• 根据实际需求，可能需要进一步优化代码，如添加错误处理、进度显示等。