web可以使用Input type="file"来上传图片或者文件
<input name="myFile" type="file">
对应事件:change
常用属性:accept, multiple, capture
accept:限制文件类型
audio/* 表示所有音频文件 HTML5(支持)
video/* 表示视频文件 HTML5(支持)
image/* 表示图片文件 HTML5(支持)
支持逗号分隔的 MIME 类型字符串,写可以写成如下的方式:
accept="image/png" 或者 accept=".png" ,只接受 png 图片。
accept="image/png, image/jpeg" 或者 accept=".png, .jpg, .jpeg" ,接受 PNG 和 JPEG 文件。
accept="image/*" ,接受任何图片文件类型。
multiple(多选):
multiple 属性:当用户所在的平台允许使用 Shift 或者 Contro键时,用户可以选择多个文件。
如果不希望多选,可以直接忽略 multiple 属性。
capture(调用设备媒体):
capture 属性:在webapp上使用 input 的 file 属性,指定 capture 属性可以调用系统默认相机、摄像和录音功能。
capture表示,可以捕获到系统默认设备的媒体信息,如下:
capture="camera" 相机
capture="camcorder" 摄像机
capture="microphone" 录音
还可以设置capture="user"相机前置摄像头
具体使用实例:
/*html部分*/ <input type="file" @change="toBase64($event)" class="upload_img"> /*js部分*/ toBase64(e){ let _this = this; let files = e.target.files[0]; let reader = new FileReader(); reader.readAsDataURL(files); reader.onload = function() { let imgcode = this.result.replace(/^data:image/(jpeg|png|gif|jpg|bmp);base64,/, ''); //其他操作 }; //清空数据 e.target.value = ''; }