zoukankan      html  css  js  c++  java
  • element-ui upload组件上传图片时限制图片宽高

    template部分代码,引入upload组件,这里采用自动上传文件

    <div class="filesC">
    <el-upload
    ref="files"
    name="imgFile"
    class="avatar-uploader"
    :with-credentials="true"
    :action="action"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :on-error="handleAvatarError"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    &nbsp;图片尺寸:141*54
    </div>

    script部分代码,图片上传之前触发 beforeAvatarUpload ,在这里return false 会中断上传操作

    beforeAvatarUpload (file) {
    let _this = this
    if (file.type.indexOf('image')<0) {
    this.$alert({message: '图片格式不正确', btn: false})
    return false
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    const isSize = new Promise(function(resolve, reject) {
    let width = 141;
    let height = 54;
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload = function() {
    let valid = img.width == width && img.height == height;
    valid ? resolve() : reject();
    }
    img.src = _URL.createObjectURL(file);
    }).then(() => {
    return file;
    }, () => {
    _this.$alert({message: '上传的icon必须是等于141*54!', btn: false})
    return Promise.reject();
    });
    return isSize
    },
    handleAvatarSuccess (res, file) {
    if (res.state==200) {
    this.imageUrl = URL.createObjectURL(file.raw);//从文件中读取的本地文件路径,用于显示在img标签里
    this.fileUrl = res.data//上传成功后,后台给返回的图片线上路径
    }else{
    this.$alert({message: '上传失败', btn: false})
    }

    },
    handleAvatarError (res, file) {
    this.$alert({message: '选择图片失败', btn: false})
    /*this.imageUrl = URL.createObjectURL(file.raw);*/
    },

    css代码,修改原组件的样式

    .filesC .avatar-uploader .el-upload {
    border: 1px solid #aaa;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    }
    .filesC .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
    }
    .filesC .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    141px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: white;
    }
    .filesC .avatar {
    141px;
    height: 54px;
    display: block;
    }
  • 相关阅读:
    每天一道LeetCode--141.Linked List Cycle(链表环问题)
    每天一道LeetCode--119.Pascal's Triangle II(杨辉三角)
    每天一道LeetCode--118. Pascal's Triangle(杨辉三角)
    CF1277D Let's Play the Words?
    CF1281B Azamon Web Services
    CF1197D Yet Another Subarray Problem
    CF1237D Balanced Playlist
    CF1239A Ivan the Fool and the Probability Theory
    CF1223D Sequence Sorting
    CF1228D Complete Tripartite
  • 原文地址:https://www.cnblogs.com/fairy62/p/9680361.html
Copyright © 2011-2022 走看看