iview upload 上传图片

<span class="up_img">上傳圖片:&nbsp;&nbsp;&nbsp;</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%;   
}

猜你喜欢

转载自blog.csdn.net/yang__k/article/details/103933705