zoukankan      html  css  js  c++  java
  • 图片上传

    this.$nextTick(function() {
    let _self = this;
    $(this.$el).on('change', 'input[type="file"]', function() {
    // 判断图片类型
    const rFilter = /^(?:image/jpeg|image/png|image/bmp)$/i;
    const imgFile = this.files[0];
    if(!imgFile) return;
    const _this = this;
    const reader = new FileReader();
    reader.onload = function(e){
    const data = e.target.result;
    const image = new Image();
    image.src = data;
    image.onload = function(){
    const width = image.width;
    const height = image.height;
    if(width != 1029 || height != 270){
    $(_this).val('');
    return globalBus.$emit('warning', '尺寸需要1029*270哦!');
    }else{
    if(rFilter.test(imgFile.type)){
    // 判断图片大小,通过max-size传值,100kb
    if(Math.ceil(imgFile.size / 1024) < _self.maxSize){
    common.ajax({
    target: $(_self.$el),
    url: DI.common.upload,
    success: function(data){
    if(data.retCode == 0){
    const info = data.data;
    console.log(info);
    _self.$emit('input', info)
    }else{
    globalBus.$emit('warning', data.retMsg);
    }
    }
    }, true)
    }else{
    $(_this).val('');
    globalBus.$emit('warning', '图片大小不能超过' + _self.maxSize + 'Kb');

    }
    }else{
    $(_this).val('');
    globalBus.$emit('warning', '商品图片格式需要上传jpg,png,bmp哦');

    }
    }
    }

    }
    reader.readAsDataURL(imgFile);

    });
    });
  • 相关阅读:
    [SCOI2015]国旗计划
    [SCOI2015]小凸玩矩阵
    点分治复习笔记
    [HNOI2014]米特运输
    [HNOI2015]接水果
    [HEOI2016/TJOI2016]游戏
    为什么验证集的loss会小于训练集的loss?
    转载GPU并行计算
    深度学习图像标注工具汇总(转载)
    你理解了吗?
  • 原文地址:https://www.cnblogs.com/landofpromise/p/7403332.html
Copyright © 2011-2022 走看看