文件上传
- 在项目开发中,若需要进行文件文件上传时,令input标签的type属性值为file即可
<input type="file"/>
上传文件类型
- 当需要限制上传文件的类型时,就需要使用input标签的accept属性;accept属性:规定通过文件上传来提交的文件的类型。 (只针对
type="file"
)
accept属性值值 | 描述 |
---|---|
audio/* | 接受所有的声音文件 |
video/* | 接受所有的视频文件 |
image/* | 接受所有的图像文件 |
MIME_type | 一个有效的 MIME 类型,不带参数 |
调用摄像头或麦克风
-
capture属性:用于调用设备的摄像头或麦克风
-
当
accept="image/*"
或accept="video/*"
时:capture属性值 描述 user 手机前置摄像头 environment 手机后置摄像头 -
当
accept="audio"
时:只调用麦克风设备,capture属性值可以为任意值 -
当input没有capture属性时,根据accppt类型给出文件夹选项以及摄像头或者录音机选项
-
input含有multiple属性时访问文件夹可勾选多文件,调用系统摄像头或者录音机都只是单文件,无multiple时都只能单文件
-
使用前置摄像头录制视频,并获取视频base64
- HTML部分
<!-- 当input的值发生改变时,触发change事件,调用changeVideo函数 --> <input type="file" accept="video/*" capture="user" ref="videoFile" @change="changeVideo" class="file-input" hidden />
- 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的部分实例方法
- readAsArrayBuffer():读取指定的Blob或File内容,当读取操作完成时触发loadend事件,同时result属性中将包含一个ArrayBuffer对象以表示所读取文件的数据。
- readAsBinaryString():读取指定的Blob或File内容,当读取操作完成时触发loadend事件,同时result属性中将包含所读取文件原始二进制格式。
- readAsDataURL():读取指定的Blob或File内容,当读取操作完成时触发loadend事件,同时result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
- 以上三个方法参数均为即将被读取的Blob或File对象。