vue 本地预览 图片和音频

前言

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。

参考: FileReader

图片预览代码

<script setup>
/*
new FileReader()  是一种异步文件读取机制
.onload 文件读取成功时触发
.readAsDataURL    将读取到的文件编码成  DataURL

*/

import { ref } from 'vue';


let imgurl = ref('')
const fn = (e) =>{
  console.log(e.target.files[0])
  let reader =  new FileReader()
  // 文件读取成功时，触发
  reader.onload = () =>{
    imgurl.value =  reader.result
  }
  // 将读取到的文件编码DataURL
  reader.readAsDataURL(e.target.files[0])

}
</script>

<template>
  <header>
    <h1>FileReader 图片预览</h1>
    <img  :style="{width: '200px' }" :src="imgurl"   />
    <input  @change="fn"   type="file" />
   
  </header>

 
</template>

音频预览

<script setup>
/*
new FileReader()  是一种异步文件读取机制
.onload 文件读取成功时触发
.readAsDataURL    将读取到的文件编码成  DataURL

*/

import { ref } from 'vue';


let imgurl = ref('')
const fn = (e) =>{
  console.log(e.target.files[0])
  let reader =  new FileReader()
  // 文件读取成功时，触发
  reader.onload = () =>{
    imgurl.value =  reader.result
  }
  // 将读取到的文件编码DataURL
  reader.readAsDataURL(e.target.files[0])
}

let videourl = ref('')
const ve = (e) =>{
  console.log(e.target.files[0])
  let reader =  new FileReader()
  reader.onload = () =>{
    videourl.value =  reader.result
  }
  reader.readAsDataURL(e.target.files[0])
}
</script>

<template>
  <header>
    <h1>FileReader 图片预览</h1>
    <img  :style="{width: '200px' }" :src="imgurl"   />
    <input  @change="fn"   type="file" />


    <h1>FileReader 音频预览</h1>
    <audio :src="videourl" controls></audio>  // 注意这里
    <input  @change="ve"   type="file" />
   
  </header>

 
</template>

视频预览

<script setup>
/*
new FileReader()  是一种异步文件读取机制
.onload 文件读取成功时触发
.readAsDataURL    将读取到的文件编码成  DataURL

*/

import { ref } from 'vue';


let imgurl = ref('')
const fn = (e) =>{
  console.log(e.target.files[0])
  let reader =  new FileReader()
  // 文件读取成功时，触发
  reader.onload = () =>{
    imgurl.value =  reader.result
  }
  // 将读取到的文件编码DataURL
  reader.readAsDataURL(e.target.files[0])
}

// 音频预览
let audiourl = ref('')
const au = (e) =>{
  console.log(e.target.files[0])
  let reader =  new FileReader()
  reader.onload = () =>{
    audiourl.value =  reader.result
  }
  reader.readAsDataURL(e.target.files[0])
}

// 视频预览
let videourl = ref('')
const ve = (e) =>{
  console.log(e.target.files[0])
  let reader =  new FileReader()
  reader.onload = () =>{
    videourl.value =  reader.result
  }
  reader.readAsDataURL(e.target.files[0])
}
</script>

<template>
  <header>
    <h1>FileReader 图片预览</h1>
    <img  :style="{width: '200px' }" :src="imgurl"   />
    <input  @change="fn"   type="file" />


    <h1>FileReader 音频预览</h1>
    <audio :src="audiourl" controls></audio>
    <input  @change="au"   type="file" />

    
    <h1>FileReader 视频预览</h1>
    <video :src="videourl" controls :style="{width:'300px', height:'400px'}"></video>
    <input  @change="ve"   type="file" />
   
  </header>

 
</template>