使用HTML标签实现Upload文件上传组件
如何构建Upload文件上传组件
在前端开发中总是免不了要用到 Upload 组件,之前在开发Vue应用时使用element-ui中的Upload组件,发现在IE浏览器中失效,于是毫无计策之下选择用HTML原始标签"瞒天过海"。
效果图展示
源码展示
使用input type=‘file’ 实现Upload功能,在通过CSS修饰改善组件样式。
<div class="content-container">
<div tabindex="0" class="upload-container">
<a href="javascript:;" class="btn btn-secondary">
{{$filter("Upload")}}
<input ref="file" type="file" name="file" class="upload-input" @change="handleChange">
</a>
</div>
<div class="file-name-div">
<span v-if="!file" class="no-file">{{$filter("noFileSelected")}}</span>
<span v-else class="file-name">{{file.name}}</span>
</div>
<button class="btn-primary" @click.prevent="submit">{{$filter("Submit")}}</button>
<div class="upload-div">
<span>{{$filter("pleaseClick")}}</span>
<a target="_blank" href="static/excel/Manual_Adjust_Template.xlsx">{{$t("here")}}</a>
<span>{{$filter("downLoadTemplate")}}</span>
</div>
</div>
.content-container{
display:flex;
flex-direction:column;
align-items:center;
.file-name-div{
margin:10px 0;
.no-file,.file-name{
margin:10px 0 20px;
}
}
.upload-div{
margin-top:10px;
}
}
.upload-container{
display: flex;
position: inherit;
.btn-secondary {
position: relative;
.upload-input{
opacity: 0;
position: absolute;
overflow: hidden;
top: 0;
right: 0;
width: 100%;
height:100%;
}
}
}