zoukankan      html  css  js  c++  java
  • 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;
                },
    }
    

      

  • 相关阅读:
    L84
    L83
    T57
    T56
    Listen 82
    Listen81
    PyQt(Python+Qt)学习随笔:QListView的isWrapping属性
    PyQt(Python+Qt)学习随笔:QListView的movement属性
    PyQt(Python+Qt)学习随笔:QListView的gridSize属性
    第15.20节 PyQt(Python+Qt)入门学习:QColumnView的作用及开发中对应Model的使用
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/11684329.html
Copyright © 2011-2022 走看看