上传图片并且判断图片大小、类型、宽高
项目中需要上传图片并且判断大小、类型、宽高
changeCarousel(e){
//判断文件大小
var file = e.target.files[0]
var size = e.target.files[0].size / 1024;
var that = this
//判断大小
if (size > 1000) {
//这是element-ui提供的提示
this.$message({
type: "warning",
message: "上传的文件大小不能超过10M!"
});
return;
}
//判断是不是图片
if (!/image\/*/g.test(e.target.files[0].type)) {
this.$message({
type: "warning",
message: "选取的不是图片,请重选"
});
return;
}
//判断图片的宽和高是否相等
let reader = new FileReader()
reader.onload = function (e) {
let data = e.target.result
//加载图片获取图片真实宽度和高度
let img = new Image()
img.src = data
img.onload = function () {
// console.log(file,e.target,img,img.width,img.height)
if(img.width>=350 && img.width<=400 && img.height >= 350 && img.height<= 400 && img.width == img.height){ //图片宽和高在350到400之间 并且相等
shangchuan()
}else{
that.$message({
type: "warning",
message: "图片的宽和高应该相等且在350-400之间,请重新上传"
});
}
}
}
reader.readAsDataURL(file)
function shangchuan(){
//判断完成后在这里面发送ajax请求
}
}
另外给大家推荐一个插件exif-js,也可以直接读取图像的元数据