博客

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

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

<template>
    <div class="test">
        <video controls="true" autoplay="" name="media">
      			<source :src="videoSrc" type="video/mp4">
        </video>
    </div>
</template>

<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>

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

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

<template>
    <div class="test">
        <img :src='imgSrc'>
    </div>
</template>

<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)   //返回值是读取的数据
		}
    }