element-plus图片上传，尺寸，格式，大小前端校验

日积一沙

已于 2023-02-08 16:52:23 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript typescript elementui

于 2023-02-08 15:39:57 首次发布

本文链接：https://blog.csdn.net/qq_38329111/article/details/128936235

本文介绍如何使用Element Plus进行图片上传时的尺寸、格式和大小前端验证，包括change事件处理及axios请求参数设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、图片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 =

最低0.47元/天解锁文章