專案中經常會用到上傳圖片/視訊的地方，比如上傳頭像，上傳商品圖片、證件圖片、小視訊等等，我們需要將圖片轉為 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視訊地址如下圖所示: