element-ui el-upload 限制上传图片格式，大小，比例

最新推荐文章于 2025-06-08 14:45:36 发布

有没有认真工作

最新推荐文章于 2025-06-08 14:45:36 发布

阅读量1.4k

点赞数 19

文章标签： ui javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_42124894/article/details/134926931

版权

文章介绍了如何在Vue项目中使用El-upload组件时，对上传图片的格式（.png/.jpg/.gif）、大小（不超过2MB）以及比例（1:1）进行限制。

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

限制上传图片格式，大小，比例代码

<template>
  <div>
    <!-- :show-file-list="false" -->
    <el-upload
      class="avatar-uploader"
      action=""
      accept=".png,.jpg,.gif"
      :http-request="fnUploadRequest"
      :before-upload="beforeAvatarUpload"
      :show-file-list="false"
    >
      <img
        v-if="ImgUrl"
        :src="ImgUrl"
        class="avatar"
        alt=""
      >
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ImgUrl: ''
    }
  },
  methods: {

    async fnUploadRequest(options) {
      console.log('覆盖默认的上传行为，自定义上传', options)
    },
    /**
     * 限制上传图片格式，大小，比例
     * */
    beforeAvatarUpload(file) {
      console.log(file)
      const isJpgPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'

      if (!isJpgPng) {
        this.$message.error('上传文件格式只能是jpg/png/gif')
        return false
      }

      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      const isSize = new Promise(function(resolve, reject) {
        const img = new Image()
        img.onload = function() {
          const valid = img.width / img.height === 1
          valid ? resolve() : reject()
        }
        img.src = URL.createObjectURL(file)
      }).then(() => {
        return file
      }, () => {
        this.$message.error('上传图片比例只能为1:1, 请重新选择上传!')
        return Promise.reject()
        // return false
      })
      return isJpgPng && isLt2M && isSize
    }
  }
}
</script>

<style lang="scss" scope>
.avatarImg {
  width: 178px;
  height: 178px;
  display: block;
  background: #97a8be;
}
.hide .el-upload--picture-card {
  display: none;
}
.el-upload--picture-card{
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
}
.svgaView{
  .el-icon-plus{
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;

  }
}
</style>