<span class="up_img">上傳圖片: </span>
<div class="demo-upload-list" v-for="item in uploadList">
<div v-if="item.status === 'finished'">
<img :src="item.response.data.path">
<div class="demo-upload-list-cover">
<icon type="ios-eye-outline" @click.native="handleView(item)"></icon>
<icon type="ios-trash-outline" @click.native="handleRemove(item)"></icon>
</div>
</div>
<div v-else>
<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
</div>
</div>
<upload ref="upload" :show-upload-list="false"
:on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" multiple :on-error="upload_error"
:before-upload="upload_before" type="drag" :action='uploadUrl' style="display: inline-block;width:100px;">
<div style="width: 100px;height:58px;line-height: 58px;">
<span class="ic_pic"></span>
</div>
</upload>
获得uploadList 数据
mounted () {
this.uploadList = this.$refs.upload.fileList;
}
查看原图:
handleView(val){
this.modal_pic=true;
let k=this;
setTimeout(function(){
console.log("444444444444444444")
if(k.flagModal){
// k.pic_modal = val.response.data.path;
document.getElementById("pic_modal").src=val.response.data.path;
}
},500)
},
关于上传图片的css:
.demo-upload-list{
display: inline-block;
width: 70px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.demo-upload-list img{
width: 100%;
height: 100%;
}
.demo-upload-list-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
display: block;
}
.demo-upload-list-cover i{
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
图片按比例缩放:
#pic_modal{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}