图片/视频上传转成base64/blob格式

项目中经常会用到上传图片/视频的地方，比如上传头像，上传商品图片、证件图片、小视频等等，我们需要将图片转为 base64后再提交给后台，然后后台再将base64转成图片后进行保存，这里是基于vue+vux来写的，H5实现的基本逻辑也是一样的，样式部分省略。

一、图片上传

1、html部分

<template>
	<div class="index">
    <input type="file" name="main" id="main" value="" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
    <img :src="imgsrc">	
	</div>	
</template>

2.js部分 

2.1转化为base64格式

<script>
export default {
  name: 'index',
  data () {
   	return{
      imgsrc:'',
   	}
  },
  methods:{
    //上传图片转为base64格式
    uploadImg:function(e){
        var file = e.target.files[0]
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            this.$vux.toast.text('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种', 'middle')
            return false
        }
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = (e) => {
            this.imgsrc= e.target.result
            console.log("图片地址" + e.target.result)
            //提交到后台相关略
        }
    },
}
</script>

打印出来的base64图片地址如下图所示，将该图片通过接口提交给后台即可 

2.2转为blob格式

<script>
export default {
  name: 'index',
  data () {
   	return{
      imgsrc:'',
   	}
  },
  methods:{
    //上传图片转为blob格式
    uploadImg:function(e){
        var file = e.target.files[0]
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            this.$vux.toast.text('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种', 'middle')
            return false
        }
        var reader = new FileReader()
        reader.readAsArrayBuffer(file)
        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.imgsrc = data 
          console.log("图片地址：" + data) 
      }
    },
}
</script>

打印出来的blob格式图片地址如下图所示 

二、视频上传

1、html部分

<template>
<div class="index">
    <input type="file" accept="video/*" id="video" name="video" @change="uploadVideo($event)">
    <video :src="videoSrc"></video>
</div>	
</template>

2.js部分 

2.1转为base64格式

<script>
export default {
  name: 'index',
  data () {
   	return{
          videoSrc:'',
   	}
  },
  methods:{
    //上传视频转为based4格式
            uploadVideo(e) {
          var that = this;
            var video = event.target.files[0];  //选择的文件
            var reader = new FileReader();  
            var rs = reader.readAsDataURL(video);  
            reader.onload = (e) =>{
              var videoSrc= e.target.result; 
              console.log(videoSrc)
              //提交到后台部分略
            }       
        },
  },
}
</script>

打印出来的base64视频地址如下图所示，将该图片通过接口提交给后台即可 

2.2转为blob格式 

<script>
export default {
  name: 'index',
  data () {
   	return{
          videoSrc:'',
   	}
  },
  methods:{
    //上传视频转为blob格式
    uploadVideo(e) {
          var that = this;
            var video = event.target.files[0];  //选择的文件
            var reader = new FileReader();  
            var rs =  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.videoSrc= data; 
              console.log("视频地址" +data)
              //提交到后台部分略
          } 
        },
}
</script>

打印出来的blob视频地址如下图所示: