html
<div class="content">
<div class="background-picture">
<img src="../../assets/images/背景图@2x.png">
<div class="content-box">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 show-box">
<div class="row">
<div class="col-lg-12 show-title">
创客马拉松最终展示
<div class="col-lg-12" >
<div class="title-line">
<div class="col-lg-12 show-basic">
最终展示
<div class="col-lg-12 reminder">
仔细填写以下信息，注意格式，务必要填写真实准确的信息，*为必填项，一旦确认提交审核，则无法修改。
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div class="form-group position-relative">
<span class="sign">*
<label class="item-title">项目简介表
<div class="control-form">
<p class="help-block">(文件格式为：.doc,.docx)
<ul class="upload-imgs">
<li v-if="projectTable">
<div class="img"><div class="table-name">{{projectTable.name }}</div><img src="../../assets/images/文件图标.png">
<input type="file" class="upload" @change="addFile()" ref="inputerProject" multiple accept=".doc,.docx"/>
<a class="add"><span class="glyphicon glyphicon-plus-sign"></span><p>点击上传
<div class="col-lg-12" >
<div class="title-line">
<div class="col-lg-12 apply-btn">
<button type="button" v-on:click="submit" class="btn btn-primary btn">提交审核
javascript
import {uploadFileMalathion}from "../../api/index.js"
export default {
name:"malathionResultShow",
data() {
return {
// 第二个项目简介表
formDataProject:new FormData(),
projectTable:'',
}
},
methods: {
//上传文件的方法
addFile(){
let inputDOM =this.$refs.inputerProject;
let fil = inputDOM.files;
// 通过DOM取文件数据
this.projectTable = fil[0];
this.formDataProject.append("projectInfo",this.projectTable);
console.log(fil);
console.log(fil[0].name);
console.log(this.projectTable);
},
// 提交文件的方法
submit(){
let params ='';
// params.teamId = 2;
this.formDataProject.append("teamId", 2);
params =this.formDataProject;
uploadFileMalathion(params).then(res=>{
if(res.data.success){
console.log("哈哈哈");
}
});
// for(let key in this.imgs){
// let name=key.split('?')[0];
// this.formData.append('multipartFiles',this.imgs[key],name);
// }
// this.$http.post('/opinion/feedback', this.formData,{
// headers: {'Content-Type': 'multipart/form-data'}
// }).then(res => {
// this.alertShow=true;
// });
},
},
mounted() {
}
}
style
<style scoped>
/**/
.float-left{
float:left;
}
.position-relative{
position:relative;
}
.sign{
position:absolute;
top:0;
left: -8px;
color:red;
}
/**/
.background-picture{
margin-top:60px;
width:100%;
height:300px;
}
.background-picture img{
width:100%;
height:100%;
}
.content-box{
width:100%;
background:rgb(244, 248, 249);
}
.content-box{
width:100%;
background:rgb(244, 248, 249);
}
.show-box{
background-color:white;
padding:40px 50px;
margin-top: -200px;
margin-bottom:60px;
border-radius:4px;
}
.show-title{
font-size:24px;
/*border: 1px solid red;*/
font-family:Source Han Sans CN;
font-weight:bold;
color:rgba(55,58,60,1);
opacity:1;
}
.title-line{
border:0.5px solid rgba(221,221,221,1);
margin-top:20px;
margin-bottom:20px;
}
.show-basic{
font-size:16px;
font-family:Source Han Sans CN;
margin-bottom:15px;
font-weight:bold;
line-height:36px;
color:rgba(85,89,92,1);
opacity:1;
}
.reminder{
font-size:8px;
font-family:Source Han Sans CN;
font-weight:400;
line-height:24px;
margin-bottom:15px;
color:rgba(119,119,119,1);
opacity:1;
}
.apply-btn{
text-align:center;
margin-top:30px;
}
.btn{
width:25%;
}
/*上传图片功能的css*/
.upload-imgs{
margin:10px 0 30px 0;
overflow:hidden;
font-size:0;
}
.upload-imgs li{
position:relative;
width:118px;
height:118px;
font-size:14px;
display:inline-block;
padding:10px;
margin-right:25px;
border:2px dashed #ccc;
text-align:center;
vertical-align:middle;
}
.upload-imgs li:hover{
border-color:red;
}
.upload-imgs .add{
display:block;
background-color:#ccc;
color:#ffffff;
height:94px;
padding:8px 0;
}
.upload-imgs .add .glyphicon{
padding:10px 0;
font-size:10px;
}
.upload-imgs li:hover .add{
background-color:blue;
}
.upload-imgs li .upload{
position:absolute;
top:0;bottom:0;
left:0;
right:0;
background-color:transparent;
opacity:0;
width:118px;
height:118px;
}
.upload-imgs .img{
position:relative;
width:94px;
height:94px;
/*line-height: 94px;*/
}
.upload-imgs .img img{
width:60%;
height:60%;
position:absolute;
top:4px;
left:21px;
}
.upload-imgs .img .table-name{
display:block;
padding-top:2px;
position:absolute;
left:0px;
top:60px;
width:90px;
height:40px;
font-size:4px;
text-align:center;
/*border: 1px solid red;*/
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
/*第三个图片展示*/
.upload-imgs .imgMaterial{
position:relative;
width:94px;
height:94px;
/*line-height: 94px;*/
}
.upload-imgs .imgMaterial img{
width:100%;
height:100%;
}
.upload-imgs .imgMaterial .close{
display:none;
}
.upload-imgs li:hover .imgMaterial .close{
display:block;
position:absolute;
right: -6px;
top: -10px;
line-height:1;
font-size:22px;
color:red;
}
