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