文档章节

VUE动态绑定audio/video/img的src不能播放或显示

 青衫旧巷
发布于 2018/09/04 19:59
字数 728
阅读 5578
收藏 3

写个项目,要求要本地上传音视频至服务器,再回显可播放。
当前项目使用了elementUI+Vue
上传图片,请求接口,将图片或者音频文件提交给后台,后台返回存储图片或者音频的ID,因为后台存到mogondb里面了,所以返回的是ID,如果存到服务器里面,返回的就是图片或者是音频存到服务器的地址。回显图片的方式是,先请求接口,根据图片的ID,请求接口图片或者是音频返回的内容,请求接口返回的内容为一个图片或者是音频。
图片如下:

页面显示的内容:

因为接口都是直接返回图片和音频,所以你不能用get请求,只能直接拼接到标签后边。

图片回显代码如下:

<template>
  <el-upload
     class="avatar-uploader"
     :action="fileurl"
     :data="file"
     :show-file-list="false"
     :before-upload="beforeAvatarUpload"
     :on-success="handleAvatarSuccess"
     :on-error="handleAvatarError">
     <img v-if="imageUrl" :src="imageUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
    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:{
           
        }
    }
</script>
<style scoped>

</style>

Vue音频动态加载踩到的坑,回显音频的时候也是和回显图片一样的方法,但是音频的资源没有加载进来,一直没有声音,最后使用了动态拼接音频标签的方法,将音频文件加载进来了。
代码如下:

<template>
  <div id="zomain">
    
  </div>
</template>
<script>
  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 = 
                 "<audio id='zo-audio' loop='loop' autoplay>"+
                  "<source id='audioSource' src='"+ this.musicSrc +"' type='audio/mp3'>"+
                 "</audio>";
                $('#zomain').append(audioDom);
                //苹果手机音频兼容性
                document.addEventListener("WeixinJSBridgeReady", function () { 
                 $('#zo-audio').get(0).play();
                 }, false);
             } 
        }
    }
</script>
<style scoped>

</style>


 

© 著作权归作者所有

粉丝 1
博文 61
码字总数 35826
作品 0
东城
私信 提问
加载中

评论(2)

不愿透露姓名的Mr成
不愿透露姓名的Mr成
用vue还用jq这。。。这。。。
lookenghua
lookenghua
给你一个思考的方向,我用videojs做视频播放器时,切换地址首先先给src替换掉,然后在调用videojs的loader方法,视频才会切换成功,我觉得你这个虽然把地址切换了,但是没有告诉播放器你要切换到这个视频
好程序员web前端分享菜鸟Vue学习笔记(二)

好程序员web前端分享菜鸟Vue学习笔记(二),今天天气不错,心情也不错,最近学习Vue越来越顺利了,今天接着学习,接着记录。 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中...

好程序员IT
05/09
30
0
好程序员web前端分享Vue学习笔记(一)

好程序员web前端分享Vue学习笔记(一)Vue框架是JS的封装框架,使用了MVVM模式,即model—view—viewmodel模式, 简而言之,就是数据与视图的绑定。 我准备开始学习一些最基础的Vue使用,以此...

好程序员IT
05/09
25
0
用Vue.js开发一个电影App的前端界面

我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界...

笔阁
2017/12/22
587
0
FileReader初步使用实现上传图片预览效果

FileReader 作为文件处理读取器现在用处相对多一些。初次使用作为上传预览实例 首先要有input 和img 属性有点多因为我这个是vue的项目所以有用到ref,jq的话就可以直接用id 来查找元素进行事...

Castiel_Z
2018/05/30
0
0
没朋友(mpvue),还有音乐陪你

炎炎夏日,剧烈的高温也抵挡不住对学习的坚持。对于学习,很多时候都会有松懈和逃避的心理,但看到身边近乎疯狂的考研党们,我还是选择了坚持。距离上次发文章已经有一个月之久了,期间学习了...

我服啦
2018/07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android Binder机制 - interface_cast和asBinder讲解

研究Android底层代码时,尤其是Binder跨进程通信时,经常会发现interface_cast和asBinder,很容易被这两个函数绕晕,下面来讲解一下: interface_cast 下面根据下述ICameraClient例子进行分析...

天王盖地虎626
15分钟前
3
0
计算机实现原理专题--存储器的实现(二)

计算机实现原理专题--存储器的实现(一)中描述了一种可以记住输入端变化的装置。现需要对其功能进行扩充,我们将上面的开关定义为置位,下面的开关定义为复位,然后需要增加一个保持位,当保...

FAT_mt
18分钟前
3
0
集合--Collection与迭代

1.1Collection 集合 集合:集合是Java提供的一种容器技术,可以用来存储多个数据 集合与数组的区别: 数组的长度是固定的,集合的长度是可变的 数组中存储的是同类型的元素,存储基本数据类型...

Firefly-
25分钟前
10
0
聊聊rocketmq的consumeTimeout

序 本文主要研究一下rocketmq的consumeTimeout consumeTimeout rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/consumer/DefaultMQPushConsumer.java public class Defaul......

go4it
27分钟前
2
0
JAVA--高级基础开发

Day13[Map集合练习题] 练习一:Map接口的特点 请简述Map 的特点: Map集合中存放的数据都是键值对,并且键不能相同,值可以相同。 Map集合中的Key是根据Set集合来存放的。 Map集合可以使用n...

李文杰-yaya
28分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部