最近项目中遇到问题,记录一下。
使用的是uniapp,需要在编辑组件editor中插入视频。但editor本身是不支持视频插入的,于是采用插入视频封面的方式,为视频占位。
选择视频时,H5和安卓端都没有提供视频封面的缩略图。我采用了rendjs的方式将获取到的视频封面转化成了base64编码的字符串。
但是,安卓端将图片上传时,服务器没收到任何东西。
其实微信小程序也存在这样的问题。当插入图片使用选择视频时提供的缩略图thumbTempFilePath时,实际生成的<img>标签的src值也是base64的,那么上传的时候不要直接使用这个src值,而应该使用thumbTempFilePath的值。
而H5貌似将base64转换成了图片文件,上传没问题。如下图。

H5上传base64图片的接口数据

解决安卓端的问题:
调用HTML5+ 的扩展规范,生成Bitmap对象加载base64图片,然后将其保存到本地,得到保存路径。上传时就是用此路径。

 // #ifdef APP-PLUS
     // renderjs获得视频封面后调用
      updateVideos(newVal) {
        this.base64ToPath(newVal)
      },
      // 将base64转换成path     
      base64ToPath(list) {
        for(const item of list) {
          const isBase64 = item.posterUrl.startsWith('data:image')
    
          if(isBase64) {
            const arr = item.posterUrl.split(',')
            // base64编码
            const base64Data = arr[1]        
            const mime = arr[0].match(/:(.*?);/)[1]
            // 文件的后缀
            const suffix = mime.split('/')[1]            
            const fileName = Date.now() + '.' + suffix
            
            // 创建Bitmap对象将图片加载,然后保存到本地,得到保存地址,然后插入editor
            const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
            bitmap.loadBase64Data(base64Data, () => {            
              const filePath = '_doc/uniapp_temp/' + fileName             
            
              bitmap.save(filePath, { overwrite: true }, (res) => {
                // res的值:
                // {
                //     "target": "file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/1699235749412.jpeg",
                //     "width": 360,
                //     "height": 200,
                //     "size": 9065
                // }             
                // 释放Bitmap图片占用的内存资源,销毁后图片对象将不可使用,其id属性值为undefined,调用其所有方法操作都会失败。
                bitmap.clear()
                
                this.editorCtx.insertImage({
                  width: '100%', // 图片宽度(pixels/百分比)
                  src: res.target, // 图片保存到本地的路径
                  extClass: 'video-poster',
                  data: {
                    url: item.url, // 视频地址
                    width: item.width, // 图片宽度(pixels/百分比)
                    height: item.height,                
                  },
                  alt: '视频',                 
                })             
                resolve(res.target) 
              }, (err) => {
                console.log('保存-Base64图片数据失败')
                bitmap.clear()                
                reject(err)
              })
       
            }, (e) => {
              this.$u.toast('插入视频失败')                
            })      
          }        
        }
      },
      // #endif

      // 上传,参数url就是上面保存视频封面的路径
      upload(url) {
        const task = uni.uploadFile({
          url: this.actionUrl, // 图片上传到服务器的地址
          filePath: url, // 保存视频封面的路径
          name: 'imgs', // 文件对应的key
          success: res => {
            // .....
          }
      }

参考:利用canvas获取视频封面 https://segmentfault.com/a/1190000041753438


lavender
27 声望2 粉丝