一、图片change事件
const handleBgChange: UploadProps['onChange'] = async (uploadFile) => {
//调用像素校验方法
const pxResult = await verificationPicPx(uploadFile.raw!, 600, 840)
if (!pxResult) {
ElMessage.error('图片尺寸仅支持：600px*840px')
return
}
//调用格式校验方法
const typeResult = verificationPicType(uploadFile.raw!)
if (!typeResult) return
//如果都校验通过，页面显示图片
configInfo.info.img_url = URL.createObjectURL(uploadFile.raw!)
//准备图片上传数据
const formData = new FormData()
formData.append('type', 'object')
formData.append('title', 'file')
formData.append('file', uploadFile.raw!)
progressSeen.value = true //上传进度条
const uploadProgress = (progressEvent: any) => {
var complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0
progress.value = complete
} //上传进度计算
const { code, data } = (await upload(formData, token, {
onUploadProgress: uploadProgress
})) as any
if (code == 0) {
//显示上传成功后返回的路径
configInfo.info.img_url = data.img_url
}
}
二、下面是尺寸，格式，大小各自的校验方法
/**
* 上传的图片格式判断
* @param {blob} file: 上传的图片文件
* @returns {boolean} 验证结果
*/
const verificationPicType = (file: File) => {
if (!file) return false
//格式类型
var fileTypes = ['image/jpg', 'image/png', 'image/gif'] // 图片限制的格式类型
if (!fileTypes.includes(file.type)) {
ElMessage.warning('当前图片仅支持格式为：' + fileTypes.join(' ，'))
return false
}
//判断size
if (file.type == 'image/jpg' || file.type == 'image/png') {
const result = verificationPicSize(file, 200, 'K')
if (!result) {
ElMessage.error('jpg/png小于200k')
return false
} else {
return true
}
} else if (file.type == 'image/gif') {
const result = verificationPicSize(file, 2, 'M')
if (!result) {
ElMessage.error('gif小于2m')
return false
} else {
return true
}
}
}
/**
* 上传的图片大小判断
* @param {blob} file: 上传的图片文件
* @param {number} limit: size限制
* @param {string} unit: size单位
* @returns {boolean} 验证结果
*/
const verificationPicSize = (
file: File,
limit: number,
unit: string
): boolean => {
if (!file || !limit || !unit) return false
if (unit == 'K') {
if (file.size / 1024 > limit) {
return false
} else {
return true
}
} else if (unit == 'M') {
if (file.size / 1024 / 1024 > limit) {
return false
} else {
return true
}
} else {
return false
}
}
/**
* 上传的图片尺寸校验
* @param {blob} file: 上传的图片文件
* @param {number} imgWidth: 图片宽度
* @param {number} imgHeight: 图片高度
* @returns {boolean|Promise} 验证结果
*/
const verificationPicPx = (file: Blob, imgWidth: number, imgHeight: number) => {
if (!file || !imgWidth || !imgHeight) return false
// 获取文件尺寸，判断尺寸在不在规定范围之内
return new Promise(function (resolve, reject) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (theFile: any) {
const image = new Image()
image.src = theFile.target?.result
image.onload = function (res: any) {
if (res.target.width !== imgWidth || res.target.height !== imgHeight) {
resolve(false)
} else {
resolve(true)
}
}
}
})
}
三、axios请求传参
//图片上传
export function upload(data:any,token: string,config:any) {
return POST('xxx', data, {
Authorization: token,
'Content-Type':'multipart/form-data'
},config)
}
//POST封装
export function POST(url: string, data: any, headers: any = {},config?:any) {
return httpRequest.post(url, data, {
headers: {
...headers
},...config
})
}
参考链接
发表评论