vue中Axios文件上传

核心代码：

<el-button class="file-box" v-if="beforeUpload()" type="text">
    <input style="border: none;" type="file" class="file-btn" @click="e => {e.target.value ='';} "  @change="uploadExcel"/>
    <el-icon class="cla-icon"><Download /></el-icon>导入
</el-button>

注：@click="e => {e.target.value ='';} " 防止重复文件名上传失败

js部分：

function uploadExcel(e:any){
    let file = e.target.files[0];
    let param = new FormData(); //创建form对象
    param.append('file',file);//通过append向form对象添加数据
    let config = {
        headers:{'Content-Type':'multipart/form-data'},//请求头
        timeout:{timeout: 300000},
    }; //添加请求头 //timeout 5分钟

    Axios.post("请求的url",param,config).then((res: any) => {
        if(res.success && res.result.status == 1){
            Context.Info("上传完成!");
        }else {
            Context.Warning(res.error);
            return false;
        }
    }).catch((e:any) => {
        Context.Warning("连接超时！请稍候重试");
    });
}

css部分：

.file-box {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: rgb(252, 113, 0);
    background-color:#fff;
}

.file-btn {
    top: 0; left: 0;
    position: absolute;
    width: 100%;height: 100%;
    outline: none;
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    
}