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


                                <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;
            },
}

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM