验证中...
助力高校计算机教育 —— 码云为老师推出免费高校版,高达 200 人的协作团队
语言: JavaScript
分类: JavaScript 工具
最后更新于 2018-06-14 09:28
gistfile1.txt
原始数据 复制代码
<template>
<div>
<div class="demo-upload-list" v-for="item,index in uploadList">
<!-- <template v-if="item.status === 'finished'"> -->
<img :src=item.oraginalImg>
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(index)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
</div>
<!-- </template> -->
<!-- <template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template> -->
</div>
<Upload
v-if='this.uploadList.length<5'
ref="upload"
:show-upload-list="false"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
multiple
type="drag"
:action="Url+'/image-upload/upload-image'"
:data='{
type:"goods",
store_id:storeId,
}'
style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="camera" size="20"></Icon>
</div>
</Upload>
<Modal title="图片预览" v-model="visible" style="z-index:9999;">
<div style="width:486px;height:400px;">
<img :src=imgurl v-if="visible" style="width: 100%;height:100%;">
</div>
</Modal>
</div>
</template>
<script>
import baseURL from "@/api/baseURL.js";
export default {
props:['imgList'],
data () {
return {
visible: false, //是否图片预览
imgurl:'',//选中的图片
uploadList:[],//图片列表
}
},
computed:{
storeId () { //店铺id
return this.$cookie.get('storeId');
},
Url () { //上传路径
return baseURL.upload
},
newImgList(){
return this.uploadList
}
},
methods: {
handleView (index) { //点击预览
this.imgurl = this.uploadList[index].oraginalImg;
this.visible = true;
},
handleRemove (index) {//点击删除
this.uploadList.splice(index,1)
},
handleSuccess (res, file) { //上传成功回调
console.log(file);
var obj = {};
obj.oraginalImg = file.response.message;
obj.bigImg = file.response.data.big;
obj.smallImg = file.response.data.small;
obj.tinyImg = file.response.data.tiny;
obj.previewImg = file.response.data.large;
this.uploadList.push(obj)
},
handleFormatError (file) { //类型失败回调
this.$Notice.warning({
title: '图片格式不正确',
desc: '图片类型错误,请选择jpg或png .'
});
},
handleMaxSize (file) { //大小失败回调
this.$Notice.warning({
title: '图片大小错误',
desc: '图片不能超过2M.'
});
},
handleBeforeUpload () {
console.log(this.newImgList);
const check = this.newImgList.length < 5;
if (!check) {
this.$Notice.warning({
title: '最多可以上传5张.'
});
}
return check;
}
},
watch:{
imgList(){
this.uploadList =[];
this.imgList.forEach((item)=>{
this.uploadList.push(item)
})
},
uploadList(){
console.log('监控变化');
console.log(this.uploadList);
this.$emit('btnProps',this.uploadList)
}
},
mounted () {
console.log('upload初始化获得的集合');
this.imgList.forEach((item)=>{
this.uploadList.push(item)
})
}
}
</script>
<style lang="less">
.demo-upload-list{
display: inline-block;
width: 60px;
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;
}
</style>

评论列表( 0 )

你可以在登录后,发表评论

10_float_left_people 10_float_left_close