input标签进行媒体文件上传及调用摄像头或麦克风

文件上传

1. 在项目开发中，若需要进行文件文件上传时，令input标签的type属性值为file即可

   <input type="file"/>
   

上传文件类型

2. 当需要限制上传文件的类型时，就需要使用input标签的accept属性；accept属性：规定通过文件上传来提交的文件的类型。 （只针对type="file"）

accept属性值值	描述
audio/*	接受所有的声音文件
video/*	接受所有的视频文件
image/*	接受所有的图像文件
MIME_type	一个有效的 MIME 类型，不带参数

调用摄像头或麦克风

1. capture属性：用于调用设备的摄像头或麦克风

   • 当accept="image/*"或accept="video/*"时：

     capture属性值	描述
     user	手机前置摄像头
     environment	手机后置摄像头

   • 当accept="audio"时：只调用麦克风设备，capture属性值可以为任意值

   • 当input没有capture属性时，根据accppt类型给出文件夹选项以及摄像头或者录音机选项

   • input含有multiple属性时访问文件夹可勾选多文件，调用系统摄像头或者录音机都只是单文件，无multiple时都只能单文件

使用前置摄像头录制视频，并获取视频base64

1. HTML部分

   <!-- 当input的值发生改变时，触发change事件，调用changeVideo函数 -->
   <input
     type="file"
     accept="video/*"
     capture="user"
     ref="videoFile"
     @change="changeVideo"
     class="file-input"
     hidden
   />
   

2. js部分

   changeVideo () {
   	// 获取到input标签的上传的文件对象
   	const files = this.$refs.videoFile.files;
   
   	// 通过FileReader构造函数创建一个新的FileReader对象
   	let reader = new FileReader();
   	
   	// 通过新创建的FileReader对象获取input元素上传的files文件对象，并使用readAsDataURL()方法读取
   	reader.readAsDataURL(file);
   
   	// 这是一个异步操作，当读取完成后，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
   	reader.onload = () => {
   		// 输出文件base64
      		console.log(reader.result)
       }
   }
   

FileReader的部分实例方法

1. readAsArrayBuffer()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含一个ArrayBuffer对象以表示所读取文件的数据。
2. readAsBinaryString()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含所读取文件原始二进制格式。
3. readAsDataURL()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
4. 以上三个方法参数均为即将被读取的Blob或File对象。