image.png
js
let formData = new FormData();
formData.append("operatorName", 'admin');
formData.append("phWbFiles", el);
//formData.append("phWbFiles", el);若同一个参数继续append
调用上传方法
this.upLoadFiles(this,baseUrl+'',formData).then(()=>{
成功返回，执行的方法
})
公共上传方法(上传环境内this指针,上传地址，上传数据)
upLoadFiles(_this,_url，formData){
return new Promise( (resolve,reject)=>{
_this.axios({
url: _url,
method: 'post',
data:formData,
headers:{
'Content-Type':'multipart/form-data'
}
}).then(res => {
if(res.code == 200){
resolve(res.data)
}
}).catch( res => {
_this.$message({
showClose: true,
message: '上传失败，请重新尝试',
type: 'error',
duration:'1000'
});
})
})
},
addFile('fileInputWeb','web','xlsx')" //用来判断某个点击按钮上传的文件后缀是否正确，错误提示错误信息
//获取文件后缀
getSuffix(fileName){
let index = fileName.lastIndexOf(".")
let suffix = fileName.substr(index+1);
return suffix;
},
<el-dialog title="" :visible.sync="uploadWebVisible" custom-class="uploadWeb">
<div class="dialogTit">选择WEB文件</div>
<div class="rowLine">
<span class="web">
<label for="fileInputWeb">
<span class="uploadBtn">选择文件</span>
</label>
<input v-show="false" type="file" id="fileInputWeb" multiple @change="addFile('fileInputWeb','web','xlsx')">
<span class="uploadText">
<span v-if='web.length>0'>已添加{{web.length}}个文件</span>
<span v-else>暂未添加任何文件</span>
</span>
</span>
</div>
<div class="text">添加WEB文件已完成批量审核</div>
<div slot="footer" class="dialog-footer">
<el-button @click="uploadFileVisible = false">取 消</el-button>
<el-button type="primary" @click="doUpload()">确 定</el-button>
</div>
</el-dialog>
css
<style lang="scss">
.inputText{
.el-dialog{
width:540px!important;
background:rgba(255,255,255,1);
box-shadow:0px 10px 30px 3px rgba(0,0,0,0.5);
padding: 10px 45px;
box-sizing: border-box;
.el-dialog__header{
.el-dialog__title{
font-size:28px;
color:#767676;
}
}
.dialogTit{
text-align: center;
margin-bottom: 40px;
font-size:28px;
color:#767676;
}
.inputBox{
width: 100%;
height:50px;
background:#E3E3E3;
font-size: 28px;
border: none;
padding: 0 10px;
box-sizing: border-box;
}
.dialog-footer{
text-align: center;
.el-button{
width:111px;
height:45px;
line-height: 45px;
font-size:24px;
color: #ffffff;
border: none;
padding: 0;
border-radius: 0;
}
.el-button+.el-button {
margin-left: 20px;
}
.el-button.el-button--default{
background:rgba(179,179,179,1);
}
.el-button.el-button--default:hover{
background: #8F8F8F;
}
.el-button.el-button--primary{
background: #004EA2;
}
.el-button.el-button--primary:hover{
background: #005FC6;
}
}
}
.el-dialog.exportDialog{
.inputName{
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
line-height: 48px;
font-size: 18px;
color: #878787;
width: 100px;
text-align: right;
margin-right: 10px;
}
.inputValue{
width: 250px;
line-height: 40px;
display: inline-block;
background: #E3E3E3;
border-radius: 0;
border: 1px solid #d7d7d7;
height: 40px;
margin-top: 10px;
margin-bottom: 7px;
font-size: 18px;
}
}
.el-dialog.uploadDialog, .el-dialog.uploadWeb{
.rowLine{
margin-bottom: 15px;
.inputName{
display: inline-block;
width: 100px;
margin-bottom: 5px;
font-weight: 700;
line-height: 48px;
font-size: 18px;
color: #878787;
text-align: right;
margin-right: 10px;
}
.Hp,.inventory,.web{
display: inline-block;
width: 300px;
height: 50px;
line-height: 50px;
padding: 10px 9px;
box-sizing: border-box;
background: #E3E3E3;
vertical-align: middle;
.uploadBtn{
display: inline-block;
width:99px;
height:30px;
line-height: 30px;
background:rgba(119,119,119,1);
border:1px solid rgba(141,141,141,1);
font-size:20px;
color: #ffffff;
float: left;
cursor: pointer;
}
.uploadText{
height:30px;
font-size:20px;
color:rgba(118,118,118,1);
line-height:30px;
vertical-align: text-bottom;
}
}
}
}
}
</style>
网友评论