input 标签通过设置 type 属性为 file,则可以选中文件,通过 accept 设置上传类型
<label class="control-label file">
<input type="file" class="upload" @change="addImg" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
点击上传
</label>
CSS样式美化:
主要是在 input file 外面层 dom 元素设置 relative ,同时将 input 上传文件设置为 absolute 相对于父元素定位,且设置 opactiy 为 0, 则相当于隐藏 input ,只需要在 外层 dom 元素上写自己想要的样式就行了
.file {
position: relative;
}
.file input {
position: absolute;
font-size: 18px;
right: 0;
top: 0;
opacity: 0;
}