input[type=file] 的accept可接收image/、audio/、video/*的文件类型，废话不多说直接上代码

代码截图

代码

图片上传：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div class="s-main">
        <div class="s-image-preview" v-for="(item,index) in images" :key="index">
            <mark @click="removeImage(index)">×</mark>
            <img :src="item.url">
        </div>
        <div class="s-image-submit">
            <input type="file" accept="image/*" @change="upload">
        </div>
    </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    images:[]
  },
    methods:{
      upload(event) {
          let { files } = event.target || {};
          let { length } = files || [];
          if (length) {
            for (let i=0; i<length;i++) {
              this.images.push({url:URL.createObjectURL(files[i]),
                                file:files[i]})
            }
          }
      },
      removeImage(index) {
          this.images.splice(index,1);
        }
    }
})
</script>
<style>
    .s-main {
      width:500px;
      height:500px;
    }
    .s-image-preview,.s-image-submit {
        position:relative;
        width:113px;
        height:113px;
        display:inline-block;
        overflow:hidden;
    }
    mark {
       position:absolute;
       right:2px;
       background:none;
       color:#fff;
       z-index: 2000;
    }
    img {
      width:100%;
        height:100%;
    }
    .s-image-submit {
       border:2px dashed #ccc;
    }
    .s-image-submit:before {
        position:absolute;

        display:block;
        width:113px;
        height:113px;
        line-height:113px;
        text-align:center;
        content:'＋';
        color:#ccc;
        font-size:100px;
    }
    input {
      width:100%;
      height:100%;
      outline:none;
      opacity:0;
    }
</style>
</body>
</html>

视频上传：
<img :src="item.url">修改为：<video :src="item.url"></video>
 <input type="file" accept="image/*" @change="upload"> 修改为： <input type="file" accept="video/*" @change="upload">
 video {
    width:100%;
  }

以上就是我的全部代码分享

upload文件上传

代码截图

代码

猜你喜欢