base64和blob互转

最新推荐文章于 2025-03-25 21:58:09 发布

少年包青菜

最新推荐文章于 2025-03-25 21:58:09 发布

阅读量920

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_50884068/article/details/123260762

版权

这篇博客详细介绍了如何在前端进行文件转换，包括将视频文件从Base64编码转换为Blob对象，然后再次转换回Base64编码。示例代码展示了使用FileReader API来实现这一过程，对于理解前端文件处理和数据转换具有实践指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 转base64
<video :src="movie" style="width: 100px;" controls="controls"></video>
<input type="file" @change="btn($event)">
data(){
    return {
      movie:'',
    }
  },
  methods:{
    btn(e){
      var video = e.target.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(video);
      reader.onload = (e) =>{
        var videoSrc= e.target.result;
        this.movie=videoSrc
        console.log(this.movie)
      }
    }
  }

// 转Blob
<video :src="movie" style="width: 100px;" controls="controls"></video>
<input type="file" @change="btn($event)">
data(){
    return {
      movie:'',
    }
  },
  methods:{
    btn(e){
      var video = e.target.files[0];  //选择的文件
      var reader = new FileReader();
      reader.readAsArrayBuffer(video)
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.movie= data;
        console.log("地址" +data)
      }
    }
  }

// 转Blob转base64
<video :src="movie" style="width: 100px;" controls="controls"></video>
<input type="file" @change="btn($event)">
data(){
    return {
      movie:'',
    }
  },
  methods:{
    btn(e){
      var video = e.target.files[0];  //选择的文件
      var reader = new FileReader();
      reader.readAsArrayBuffer(video)
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.movie= data;
        console.log("地址" +data)
      }
      // blob转base64
      setTimeout(()=>{
        const readerq = new FileReader();
        readerq.readAsDataURL(new Blob([this.movie]));
        readerq.onload = () => {
          console.log('转',readerq.result)
        }
      },500)
    }
  }