js判断上传图片文件大小,尺寸,格式

/**
 * 文件宽高
 * @param eventId id
 * @param w 宽度
 * @param h 高度
 * @param callback 回调函数
这里判断图片像素的方法是异步的,所以需要在回调函数中来进行上传的操作
*/ function testImgWidthHeight(eventId, w,h,callback){ var input = document.getElementById(eventId); if(input.files){ //读取图片数据 var f = input.files[0]; var reader = new FileReader(); reader.onload = function (e) { var data = e.target.result; //加载图片获取图片真实宽度和高度 var image = new Image(); image.onload=function(){ var width = image.width; var height = image.height; if (width != w || height != h) { //隐藏 input.value=""; callback && callback(false); } else { callback && callback(true); } }; image.src= data; }; reader.readAsDataURL(f); }else{ var image = new Image(); image.onload =function(){ var width = image.width; var height = image.height; var fileSize = image.fileSize; alert(width+'===2==='+height+"====="+fileSize); } image.src = input.value; } }
/**
*文件大小
* @param fileData
* @param Max_Size
* @returns {boolean}
*/
function testMaxSize(fileData,Max_Size){
var isAllow=false;
var size = fileData.size;
isAllow = size <= Max_Size;
if(!isAllow){
vue.$message({
message: '图片大小超过限制!',
type: 'warning'
});
}
return isAllow;
}
/**
* 判断图片类型
* @param eventId
* @param gif|jpg|jpeg|png|GIF|JPG|PNG
* @returns {boolean}
*/
function testImgType(eventId) {
var tmpFile = document.getElementById(eventId);
if (!/.(jpg)$/.test(tmpFile.value)) {
tmpFile.value= "";
vue.$message({
message: '图片格式不正确!',
type: 'warning'
});
return false;
}
return true;
}
 
        //上传图片
               getFile(event) {
                   let eventId = event.target.id;
                   let type=  testImgType(eventId);
                   if(!type){
                       return;
                   }
                   let max = testMaxSize(event.target.files[0],1024*3*1024);
                   if(!max){
                       vue.$message({
                           message: '图片大小超过限制!',
                           type: 'warning'
                       });
                       return;
                   }
                   var _this =this;//回调函数this指向
                   let width = 1920;
                   let height = 1080;
                   if(eventId=="img5" || eventId=="img6" || eventId=="img7" || eventId=="img8" ){
                       width =1080;
                       height=1920;
                   }
                   let widthImg = testImgWidthHeight(eventId,width,height,function (res) {
                       if (!res) {
                           vue.$message({
                               message: '图片尺寸不正确!',
                               type: 'warning'
                           });
                       }else {
//上传请求的逻辑,在回调函数中进行处理; let formData
= new FormData(); formData.append('file', event.target.files[0]); let config = { headers: { 'Content-Type': 'multipart/form-data' } } _this.$http.post([[@{/common/uploadFile}]], formData, config).then(function (res) { if (res.data.code == '000') { if(eventId=='img1' || eventId=='img2' ){ _this.designUserList[0].cardImg=res.data.data; } } })
                  }
                  });

                    },
 
原文地址:https://www.cnblogs.com/SimonHu1993/p/9253732.html