写个项目,要求要本地上传音视频至服务器,再回显可播放。
当前项目使用了elementUI+Vue
上传图片,请求接口,将图片或者音频文件提交给后台,后台返回存储图片或者音频的ID,因为后台存到mogondb里面了,所以返回的是ID,如果存到服务器里面,返回的就是图片或者是音频存到服务器的地址。回显图片的方式是,先请求接口,根据图片的ID,请求接口图片或者是音频返回的内容,请求接口返回的内容为一个图片或者是音频。
图片如下:
页面显示的内容:
因为接口都是直接返回图片和音频,所以你不能用get请求,只能直接拼接到标签后边。
图片回显代码如下:
class="avatar-uploader"
:action="fileurl"
:data="file"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess"
:on-error="handleAvatarError">
import api from '../../../../../../utils/env.js';
export default {
name:'',
props:[],
components:{
},
data(){
return{
'iconid':'123'
'fileurl':api+"/mongodbfile/uploadtomongo", //上传图片的接口地址
'file': {
'file': ''
}, // 上传图片传递的参数
'imageUrl': '', //回显的图片的URL
}
},
computed:{
},
created(){
},
mounted(){
if('新建活动'){
console.log('新建不调用回显图片接口');
}else{
console.log('编辑活动需要调用图片接口');
}
},
methods:{
// 编辑页面调用图片回显接口
getUrlParams() {
//自定义图片编辑回显的接口和iconid动态ID
this.imageUrl = api+'/mongodbfile/downloadfromMongo?id='+this.iconid;
},
//上传文件校验
beforeAvatarUpload(file) {
const isJPG = file.type;
var isFlag = false;
if (isJPG=='image/jpeg'||isJPG=='image/png') {
isFlag=true;
}else{
this.$message.error('上传头像图片只能是 JPG | PNG 格式!');
isFlag=false;
}
//console.log(isJPG||isPNG);
return isFlag;
},
//上传图片成功
handleAvatarSuccess(res, file) {
//console.log(res);
if(res.flag=='true'){
this.imageUrl = URL.createObjectURL(file.raw);
//图片上传成功之后,重新给iconid 赋值
this.iconid = res.data;
}else{
this.$message.error(res.mes);
}
},
//上传图片失败
handleAvatarError(res, file){
this.$message.error('上传失败!');
},
},
watch:{
}
}
Vue音频动态加载踩到的坑,回显音频的时候也是和回显图片一样的方法,但是音频的资源没有加载进来,一直没有声音,最后使用了动态拼接音频标签的方法,将音频文件加载进来了。
代码如下:
import api from '../../../utils/env.js';
import axios from 'axios';
export default {
name:'',
components:{
},
data(){
return{
}
},
filters:{
},
created(){
},
mounted(){
},
methods:{
init(){
this.musicSrc = api + '/mongodbfile/downloadfromMongo?id='+soundid;
let audioDom =
""+
""+
"";
$('#zomain').append(audioDom);
//苹果手机音频兼容性
document.addEventListener("WeixinJSBridgeReady", function () {
$('#zo-audio').get(0).play();
}, false);
}
}
}