&l_vue读取本地视频文件并转化为blob">
当前位置:   article > 正文

electron和vue读取本地视频文件并转化为blob

vue读取本地视频文件并转化为blob

electron和vue读取本地视频文件并转化为blob

fs获取本地视频并转化为blob格式

<template>
    <div class="test">
        <video controls="true" autoplay="" name="media">
      			<source :src="videoSrc" type="video/mp4">
        </video>
    </div>
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<script>
    let fs = window.require('fs');
    export default {
        name: "test",
        data() {
            return {
                localSrc: 'C:/Users/xxxx/Desktop/source/视频文件.mp4',
                videoSrc: ''
            }
},
        mounted() {
            const _this= this;
            const buf = fs.readFileSync(this.localSrc);//读取文件,并将缓存区进行转换
           	const bolb = new Blob([uint8Buffer]);//转为一个新的Blob文件流
            console.log(bolb);
            _this.videoSrc = window.URL.createObjectURL(bolb); //转换为url地址并直接给到audio
        }
    }
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

参考 https://blog.csdn.net/qq_39050445/article/details/105066444

fs获取本地图片并转化为base64格式

<template>
    <div class="test">
        <img :src='imgSrc'>
    </div>
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
<script>
    let fs = window.require('fs');
    export default {
        name: "test",
        data() {
             return {
                localSrc: 'C:/Users/xxxx/Desktop/source/1.jpg',
                imgSrc: ''
            }
        },
        mounted() {
			// 1. 异步读取文件
           fs.readFile(this.localSrc, (err, data) => {    // url:读取文件的路径 data:读取的数据 err:读取失败时返回的信息
	           if (err) {
                    throw err;
                }
                console.log(data);  
                console.log(data.toString());  // 把buffer格式转化成字符串格式的数据
                console.log(data.toString('base64'));  // base64图片编码字符串
                this.imgSrc = 'data:image/jpeg;base64,'+data.toString('base64')   //返回值是读取的数据
            });
			// // 2. 同步读取文件
			//             console.log(fs.readFileSync(this.localSrc));    //返回值是读取的数据
			//             this.imgSrc = 'data:image/jpeg;base64,'+fs.readFileSync(this.localSrc)   //返回值是读取的数据
		}
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小桥流水78/article/detail/999074
推荐阅读
相关标签
  

闽ICP备14008679号