antd upload上传如何获取文件宽高
作者：wo_dxj
这篇文章主要介绍了antd upload上传如何获取文件宽高问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
antd upload上传获取文件宽高
项目新加的需求，需要判断上传图片的宽高，查了一下antd-upload组件貌似不支持这个查询，因此需要使用外部的API
直接上代码：beforeUpload 方法
handleBeforeUpload = async (file, fileList) => {
const {fileMinSize = 0,fileMinWH,fileMaxWH, fileMaxSize = 50,uploadFormat = '',uploadFormatError = ''} = this.component.props;
const isInRange = ((file.size > (fileMinSize * 1024 * 1024)) && (file.size < (fileMaxSize * 1024 * 1024)));
let isTrueType = true,isFileWH = true;//类型，尺寸
return new Promise((resolve, reject) =>{
//校验格式
if(uploadFormat != ''){
let acceptArr = uploadFormat.split(',');
let fileType = file.name.substring(file.name.lastIndexOf('.'));
if(!acceptArr.includes(fileType)){
isTrueType = false;
this.message.error((uploadFormatError == '') ? '请上传规则范围内的文件!' : uploadFormatError);
this.base.ss({'data.fileList': fileList.pop()});
}
}
//校验大小
if (!isInRange) {//大小的标识
this.message.error((fileMaxSize == 50) ? '请上传规则范围内的文件!' : '文件最大不能超过'+ fileMaxSize + 'M！');
this.base.ss({'data.fileList': fileList.pop()});
}
//校验宽高
/*********************************/
if(fileMinWH && fileMaxWH){//做下过滤有的图片需要过滤
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
//加载图片获取图片真实宽度和高度
var image = new Image();
image.src=reader.result;
image.onload = () =>{
var width = image.width;//图片的宽
var height = image.height;//图片的高
if(width < fileMinWH || width > fileMaxWH || height < fileMinWH || height > fileMaxWH){
isFileWH = false;
this.message.error('***宽高需要均大于600像素，小于4000像素');
this.base.ss({'data.fileList': []});
reject();
}else{
resolve(isFileWH && isInRange && isTrueType)
}
};
};
/**********************************/
}else{
resolve(isInRange && isTrueType);
}
})
};这样这个功能就可以完美的解决了,*包着的代码是最主要的。
antd上传文件限制大小 react Hooks
const uploadImages = {
action: requestUrl + '/api/common/CommonUpload',
headers: {
SessionKey: `${localStorage.getItem('sk')}`,
},
data: (file) => {
return {
UploadType: 1027,//后端定义的type
Id: uuidv4(),
FileType: getUploadFileType(file),
};
},
beforeUpload: (file) => {// 礼品image
const limitFileNameLen = 100;
return new Promise((resolve, reject) => {
if (file.name && file.name.length > limitFileNameLen) {
message.error('Please upload a file with a file name less than 100 characters');
//请上传文件名不超过100个字符的文件
return Promise.reject();
}
const limitM = 2;
const isLimit = file.size / 1024 / 1024 <= limitM;
console.log(isLimit);
if (!isLimit) {
message.error('The size exceeds the limit');
return Promise.reject();
}
return resolve();
});
},
}
模板：
<Upload
{...uploadImages}
accept=".jpeg,.png,.jpg"
listType="picture-card"
fileList={fileList}
onChange={handleChange}
onPreview={handlePreview}
>
{fileList.length >= 4 ? null : uploadButton}
</Upload>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。