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; } } })
}
});
},