转载学习自：https://www.cnblogs.com/conglvse/p/9524452.html
整个
vue组件文件：
template部分：
<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 apply-box">
<div class="row">
<div class="col-lg-12 apply-title">
创客马拉松最终展示
<div class="col-lg-12" >
<div class="title-line">
<div class="col-lg-12 apply-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-for='(item, key) inteamTable'>
<div class="img"><div class="table-name">{{ item.name }}</div><img src="../../assets/images/文件图标.png">
<input type="file" class="upload" @change="addFile(0)" ref="inputer" multiple accept=".doc,.docx"/>
<a class="add"><span class="glyphicon glyphicon-plus-sign"></span><p>点击上传
<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-for="(item,key) inprojectTable">
<div class="img"><div class="table-name">{{ item.name }}</div><img src="../../assets/images/文件图标.png">
<input type="file" class="upload" @change="addFile(1)" ref="inputerProject" multiple accept=".doc,.docx"/>
<a class="add"><span class="glyphicon glyphicon-plus-sign"></span><p>点击上传
<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">(建议图片格式为：JPEG/BMP/PNG，大小不超过5M)
<ul class="upload-imgs">
<li v-for='(value, key) inimgsMaterial'>
<p class="imgMaterial"><img :src="getObjectURL(value)"><span></span><a class="close" @click="delImg(key,2)">×
<li v-if="imgLenMaterial>=9 ? false : true">
<input type="file" class="upload" @change="addFile(2)" ref="inputerMaterial" multiple accept="image/png,image/jpeg,image/jpg"/>
<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" class="btn btn-primary btn">提交审核
script js部分：
export default {
name:"malathionResultShow",
data() {
return {
//第一个团队信息表
formData:new FormData(),
teamTable: [],
// 第二个项目简介表
formDataProject:new FormData(),
projectTable: [],
// 第三个实物照片
formDataMaterial:new FormData(),
imgsMaterial: {},
imgLenMaterial:0,
}
},
methods: {
//上传文件的方法
addFile(num){
//第一个上传文件的方法
if(num ===0){
let inputDOM =this.$refs.inputer;
// 通过DOM取文件数据
this.fil = inputDOM.files;
this.teamTable =this.fil;
console.log(this.fil);
console.log(this.fil[0].name);
console.log(this.projectTable);
}else if(num ===1){
let inputDOM =this.$refs.inputerProject;
// 通过DOM取文件数据
this.fil = inputDOM.files;
this.projectTable =this.fil;
console.log(this.fil);
console.log(this.fil[0].name);
console.log(this.projectTable);
}else if(num ===2){
// 第三个添加图片的
let inputDOM =this.$refs.inputerMaterial;
// 通过DOM取文件数据
this.fil = inputDOM.files;
let oldLen=this.imgsMaterial;
let len=this.fil.length+oldLen;
if(len>20){
alert('最多可上传20张，您还可以上传'+(20-oldLen)+'张');
return false;
}
for (let i=0; i
let size = Math.floor(this.fil[i].size /1024);
if (size >5*1024*1024) {
alert('请选择5M以内的图片！');
return false
}
this.imgLenMaterial++;
this.$set(this.imgsMaterial,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
}
}
},
getObjectURL(file) {
var url =null ;
if (window.createObjectURL!=undefined) {// basic
url = window.createObjectURL(file);
}else if (window.URL!=undefined) {// mozilla(firefox)
url = window.URL.createObjectURL(file);
}else if (window.webkitURL!=undefined) {// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
},
delImg(key,num){
if(num ===0){
this.$delete(this.imgs,key);
this.imgLen--;
}else if(num ===1){
this.$delete(this.imgsProject,key);
this.imgLenProject--;
}else if(num ===2){
this.$delete(this.imgsMaterial,key);
this.imgLenMaterial--;
}
},
// 提交图片的方法
// submit(){
// 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 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);
}
.apply-box{
background-color:white;
padding:40px 50px;
margin-top: -200px;
margin-bottom:60px;
border-radius:4px;
}
.apply-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;
}
.apply-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;
}
