使用HTML标签实现Upload文件上传组件

使用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%;
               }
           }        
       }