微信小程序下载 base64 视频文件到本地相册

这篇具有很好参考价值的文章主要介绍了微信小程序下载 base64 视频文件到本地相册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序下载 base64 视频文件到本地相册

问题描述:

后端传过来一个视频的 base64 编码,前端通过一个按钮点击来下载视频到本地相册。

解决代码:文章来源地址https://www.toymoban.com/news/detail-768911.html

// 点击下载按钮对应的方法
async uploadVideo() {
    uni.showLoading({
      title: '正在下载,请稍后...',
      mask: false
    });
    const getVideoUrl = await new Promise((resolve) => {
      // this.baseCode 为 视频编码
      // 注意的是这里的编码不需要携带 data:video/mp4;base64 前缀
      // 如果携带了,在调用writeFileSync会报 writeFileSync:fail base64 encode error
      const base64Video = this.baseCode.replace(/[\r\n]/g, '')
      // 进行本地临时存储
      const fs = uni.getFileSystemManager();
      const filePath = `${wx.env.USER_DATA_PATH}/video${new Date().getTime()}.mp4`;
      fs.writeFileSync(filePath, base64Video, 'base64');
      this.videoUrl = filePath
      resolve(true)
    })
    if (getVideoUrl) {
      wx.getSetting({
        withSubscriptions: true,
        success: res => {
          // 判断是否有相册的写入权限
          if (res.authSetting['scope.writePhotosAlbum']) {
            // 写入文件
            uni.saveVideoToPhotosAlbum({
              filePath: this.videoUrl,
              success: () => {
                uni.hideLoading()
                uni.showToast({
                  title: '保存成功,请到相册查看!',
                  icon: 'success',
                });
              },
              fail: (error) => {
                uni.hideLoading()
                uni.showToast({
                  title: '保存失败',
                  icon: 'none',
                });
                console.error('保存视频失败:', error);
              },
            });
          } else {
            // 没有权限,调用开启权限的方法,这里省略。
            uni.hideLoading()
            this.openSaveSetting()
          }
        }
      })
    }
},

到了这里,关于微信小程序下载 base64 视频文件到本地相册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uniapp】微信小程序 普通图片路径和base64格式图片 保存图片到相册

    第一种:普通图片路径 第二种:base64格式的图片 以上便是两种保存图片的方式。 

    2024年04月23日
    浏览(45)
  • uniapp 微信小程序 实现 将base64图片保存相册和转发分享微信好友功能记录 直接cv就能用!!!!

    一、base64图片保存相册功能 提示api:that.$refs.uToast.show用的是uview2.0的toast,可以根据具体引入的ui库去更换; 二、转发分享base64图片给微信好友功能  该功能在微信开发者工具中调试的时候会一直报错,真机是没问题的,可能是编译器的bug。 其实整个wx.showShareImageMenu会拉起保

    2024年02月11日
    浏览(73)
  • 前端 img图片如何 展示 base64 格式(并且下载到本地)

    如题:最近在做项目发现页面上有些图片是动态获取的,也就是后台给我们返回图片的存放地址,一般都是放在服务器上的某个位置,我们直接拿到渲染一下就行了,(前提是不存在跨域问题), 但是由于项目特殊性,后台使用了Python 渲染出来的图片是svg格式的图片,并且

    2024年02月09日
    浏览(61)
  • Python Selenium如何下载网页中的图片到本地?(Base64编码的图片下载)

    前言:                 在网页上,图片有时会以Base64编码的形式嵌入在HTML中,而不是作为单独的文件提供。这种方式的优点是可以减少HTTP请求的数量,因为图片数据直接包含在HTML中,不需要额外的请求来获取图片文件。这对于小图片或图标特别有用,因为这些图片的文

    2024年04月17日
    浏览(51)
  • 微信小程序 本地图片和base64图片相互转换

    wx.chooseImage === 从本地相册选择图片或使用相机拍照 wx.getFileSystemManager() === 获取全局唯一的文件管理器 wx.getFileSystemManager().readFile === 读取本地文件内容 wx.base64ToArrayBuffer() === 将 Base64 字符串转成 ArrayBuffer 对象 wx.downloadFile === 下载文件资源到本地 从手机上选择图片转base64 网络

    2024年02月03日
    浏览(56)
  • js根据base64下载文件

    项目中有个下载模板的需求,接口直接给返回的是一个base64,如图 这里的bytes不是流格式,而是一个base64格式的,这就导致我们需要先将base64转为了流,然后通过new Blob方式下载文件就行,下面看代码 定义了一个base64转二进制流的方法,接下来开始根据得到的二进制流下载文

    2024年02月17日
    浏览(42)
  • 后端返回base64文件前端如何下载

    1.后端返回base64格式文件 2.前端代码 3.请求封装

    2024年02月05日
    浏览(62)
  • flutter base64图片保存到相册

    首先base64转成uint8List,然后再用插件保存到相册(没有内置的方法处理) 保存图片的插件 完整代码如下 为啥要用下面 因为’data:image/png;base64,’ is part of the data URL,不是base-64字符串的一部分。您需要首先从URL中提取base-64数据。 否则就会报错如下: 网站用图片转base64如下

    2024年02月01日
    浏览(41)
  • WebRTC音视频通话-RTC直播本地视频及相册视频文件

    WebRTC音视频通话-RTC直播本地视频及相册视频文件 WebRTC音视频通话-RTC直播本地视频文件效果图如下 WebRTC音视频通话-RTC直播本地视频文件时候,用到了AVPlayer、CADisplayLink。 AVPlayer是什么? AVPlayer是基于AVFoundation框架的一个类,很接近底层,灵活性强,可以自定义视频播放样式

    2024年02月13日
    浏览(50)
  • jmeter下载base64加密版pdf文件

    如下图所示,接口jmeter执行后, 返回一串包含大小写英文字母、数字、+、/、=的长字符串 ,直接另存为pdf文件后,文件有大小,但是打不开;另存为doc文件后,打开可以看到和接口响应一致的长字符串。 仔细查看该接口具体信息,感觉和 ContentType: application/octet-stream、Cont

    2024年02月22日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包