Upload上传按钮记录

方式一

<div class="upload-btn-common" v-if="uploadType === 'primordial'">
     <slot></slot>
     <input class="hidden-file-input" type="file" ref="fileInput" @change="submitFile">
</div>
        
<upload-btn :uploadUrl="'/action'" class="upload-button">
 <el-button><i class="iconfont icon-daoru"></i>导入</el-button> 
</upload-btn>

.upload-button{
    position: relative;
    top: 8px;
    display: inline-block;
    height: 30px;
    box-sizing: border-box;
    cursor: pointer;
}

.upload-btn-common {
    position: relative;
    width: 80px;
    .hidden-file-input {
        width: 80px;
        height: 40px;
        /* visibility: hidden; */
        opacity: 0;
        z-index: 99;
        position: inherit;
        top: -20px;
        left: 0;
        cursor: pointer;
    }
}

方式二

<span class="file"><slot></slot> <input type="file" name="" id=""></span>

<upload-btn :uploadUrl="'/action'" class="upload-button">
<i class="iconfont icon-daoru"></i>导入
</upload-btn>

.file {
    width: 80px;
    height: 30px;
    text-align: center;
    position: relative;
    top: 10px;
    display: inline-block;
    background: #fff;
    border: 1px solid #d5d9e6;
    color: #606266;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    line-height: 30px;
    margin-left: 10px;
    cursor: pointer;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    width: 80px;
    height: 30px;
    cursor: pointer;
}
.file:hover {
    color: #5264D9;
    border-color: #cbd1f4;
    background-color: #eef0fb;
    text-decoration: none;
    cursor: pointer;
}

方式三

<el-upload
class="upload-demo"
:action="uploadUrl"
:limit="1"
:show-file-list="false">
<slot></slot>
</el-upload>

<upload-btn :uploadType="'element'" :uploadUrl="'/action'" class="upload-button">
<el-button><i class="iconfont icon-daoru"></i>导入</el-button>
</upload-btn>

.upload-button{
    display: inline-block;
    margin-left: 10px;
}

方式四

<div class="filediv" >
  <input type="file" id="btn_file" name="file" />
  <div><slot></slot></div>
</div>

.filediv{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.filediv input{
    opacity: 0;
    width: 80px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}
.filediv div{
    width: 80px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
}