项目中经常会用到上传图片/视频的地方,比如上传头像,上传商品图片、证件图片、小视频等等,我们需要将图片转为 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视频地址如下图所示: