elementUI el-upload 根据上传的图片高度,进行自适应宽度

2019/10/16 11:16
阅读数 564
<el-upload id="upload1"
                                            action=""
                                            list-type="picture-card"
                                            :before-upload="handledBeforeUpload"
                                            :on-preview="handlePictureCardPreview"
                                            :on-success="handleSuccess"
                                            :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>

  2.js

methods:{
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSuccess(response, file, fileList){
                console.log("上传文件满足条件,成功了");
                // console.log(response, file, fileList);
            },
            handledBeforeUpload(file){//重点
                let isImg = true;
                const isSize = new Promise((resolve,reject)=>{
                    let img = new Image();
                    img.onload = function(){
                        resolve(img);
                    }
                    img.src = URL.createObjectURL(file)
                }).then((res)=>{
                    let uploadId = document.getElementById("upload1");
                    let liDom = uploadId.querySelector(".el-upload-list--picture-card").firstChild;
                    let div = uploadId.querySelector(".el-upload--picture-card");
                    let scale = 150 / res.height ;
                    let width = res.width * scale;
                    liDom.style.width = width + 'px';
                    return file;
                },(err)=>{
                    return Promise.reject();
                })
                return  isImg && isSize;
            },
}

  

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部