javascript angualr 补全文件路径 + 检查图片类型 大小 尺寸

1、检查当前图片路径是全路径还是相对路径，相对路径，则自动补全域名。

// 补全图片路径
export const changeImgUrl = (newUrl) => {
  let isChange = newUrl.indexOf('http');
  let urlPrefix = 'https://demo.img.com/';
  if (isChange > -1) {
    return newUrl;
  } else if (isChange < 0) {
    return urlPrefix + newUrl;
  }
};

2、检查上传的图片文件类型是否符合要求（类型手动修改或添加）

// 校验上传图片的文件类型是否符合
export const checkImgType = (event: any) =>{
  let fileName = event.target.value.split('.');
  if(fileName[fileName.length-1] === 'png' ||
      fileName[fileName.length-1] === 'jpg' ||
      fileName[fileName.length-1] === 'jpeg' ||
      fileName[fileName.length-1] === 'bmp' ||
      fileName[fileName.length-1] === 'PNG' ||
      fileName[fileName.length-1] === 'JPG' ||
      fileName[fileName.length-1] === 'JPEG' ||
      fileName[fileName.length-1] === 'BMP'
  ){
      return true;
  } else{
      alert('请按照格式要求上传头图')
    return false;
  }
};

3、校验上传的图片大小是否符合规则

// 检查图片的大小
export const checkImgSize = (event: any, size: number) =>{
    let file = [];
    for(var i=0;i<event.target.files.length;i++){
        file.push(event.target.files[i]);
    };

    var f =file[0]
    if(f.size > size * 1024){
        alert('请按照格式要求上传头图')
        return false;

    } else {
        return true
    }

};

4、检查上传的图片的尺寸大小

// 检查图片的尺寸
export const checkImgWH = (event:any, w:number, h:number) =>{
    var f = event.target['files'][0];

    var reader = new FileReader();
    var width;
    var height;
    reader.onload = function (e) {
        var data = e.target['result'];
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload = function () {
            width = image.width;
            height = image.height;
        };
        image.src = data;
    };
    reader.readAsDataURL(f);

    console.log(width + '======' + height);
    if(Number(width) > w){
        alert('请按照格式要求上传头图')
        return false
    }

    if(Number(height) > h){
        alert('请按照格式要求上传头图')
        return false
    }
};

 

 

 

 

 

 

转载于:https://my.oschina.net/wsxiao/blog/2221614