图片示例

主要代码

1、把图片视频转成本地的地址在页面显示

 getObjectURL(file) {
      var url = null;
      // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }

2、上传视频的标签要有poster属性,否则不能播放

 <video :src="video" controls :poster="video" v-show="!showvideo"></video>

 

全部代码如下

html部分

<template>
  <div class="put_three" v-title="'填写信息'">
   
    <div class="up-box">
      <div class="upimg">
        <video :src="video" controls :poster="video" v-show="!showvideo"></video>
        <div class="del" @click="showvideo=true;video==''" v-show="!showvideo"></div>
        <img src="../assets/img/upvideo.png" alt v-show="showvideo" />
        <input type="file" accept="video/*"  @change="getvideo($event)" v-show="showvideo"/>
      </div>
    </div>
    <br><br>
    <div class="up-box">
      <div class="upimg">
        <img :src="img" alt v-show="!showimg"/>
        <div class="del" @click="showimg=true;img==''" v-show="!showimg"></div>
        <img src="../assets/img/upimg.png" alt v-show="showimg" />
        <input type="file" accept="image/*"  @change="getimg($event)" v-show="showimg"/>
      </div>
    </div>
  </div>
</template>

 

js部分

<script>

export default {
  name: "Put_three",
  data() {
    return {
      showimg: true,
      img: "",

      showvideo: true,
      video: ""
    };
  },

  created() {},

  mounted() {},

  activated() {},

  watch: {},

  methods: {
    getvideo(e) {
      let that = this;
      let files = e.target.files[0];
      var formData = new FormData();
      // if (!e || !window.FileReader) return; // 看支持不支持FileReader
      if (files.size > 50 * 1024 * 1024) {
        alert("视频不能超过50M");
        return;
      }

      var link = that.getObjectURL(files); //获取本地视频的地址在页面显示

      console.log(that.getObjectURL(files));

      that.video = link;
      that.showvideo = false;
    },

    getimg(e) {
      let that = this;
      let files = e.target.files[0];
      if (!e || !window.FileReader) return; // 看支持不支持FileReader

      if (files.size > 10 * 1024 * 1024) {
        alert("图片不能超过10M");
        return;
      }
      var img = that.getObjectURL(files); //获取本地视频的地址在页面显示

      that.img = img;
      that.showimg = false;
    },

    // 图片转成本地路径
    getObjectURL(file) {
      var url = null;
      // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }
  }
};
</script>

 

css样式

<style scoped lang="scss">
@import "../common/common";

.upimg {
  @include wh(3rem, 3rem);
  border: 1px dotted #ccc;
  margin-bottom: 0.05rem;
  overflow: hidden;
  position: relative;
  .del{
    position: absolute;
    right: -0.1rem;
    top: -0.1rem;
    width: 0.5rem;
    height: 0.5rem;
    background: pink;
    z-index: 1;
  }

  img,
  video {
    @include wh(auto, 3rem);
    position: absolute;
    display: block;
    top: 0;
  }

  input {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10000;
  }
}
</style>