在上传图片或者视频的时候,经常需要检验上传图片的大小,类型,尺寸
用upload组件,beforeUpload返回的值为Boolean或者promiss对象
<Upload
name="file"
listType="picture-card"
className={cls.upImg}
headers={{ Authorization }}
action={}
beforeUpload={beforeUploadLogo}
fileList={brandLogoImage}
onChange={changePicture}
onPreview={handlePreviewModelImage}>
{brandLogoImage.length >= 1 ? null : uploadButton}
</Upload>
beforeUploadLogo 方法
let beforeUploadLogo = async (file: { type: string; size: number }) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) {
message.error('只能上传JPG/PNG格式的图片!')
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
message.error('图片大小不能超过2MB!')
}
let flage = await checkImageWH(file, 600, 600)
return (isJpgOrPng && isLt2M && flage) || Upload.LIST_IGNORE
}
这里返回一个promise对象,通过await转换为Boolean值
let checkImageWH = (file: any, width: number, height: number) => {
return new Promise(function (resolve, reject) {
let filereader = new FileReader()
filereader.onload = (e) => {
let src = e.target?.result
let image = new Image()
image.onload = function () {
if (image.width !== width && image.height !== height) {
message.error('请上传宽高为600*600像素的图片')
reject(false)
} else {
resolve(true)
}
}
image.onerror = reject
image.src = src
}
filereader.readAsDataURL(file)
})
}