vue设置video图片_VUE动态绑定audio/video/img的src不能播放或显示

写个项目，要求要本地上传音视频至服务器，再回显可播放。

当前项目使用了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);

}

}

}