vue 上传图片

最新推荐文章于 2023-05-16 17:41:02 发布

奇迹行者还在刷野～

最新推荐文章于 2023-05-16 17:41:02 发布

阅读量163

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45558263/article/details/120847717

版权

这段代码展示了在前端如何实现图片上传功能，包括限制上传文件类型为JPG、JPEG和PNG，以及限制文件大小不超过2MB。通过`handleAvatarChange`处理文件选择后的操作，使用`beforeAvatarUpload`进行上传前的验证。当文件类型或大小不满足条件时，会显示错误提示。

摘要由CSDN通过智能技术生成

<el-upload
   v-if="activeUsage.name==='上传图片'"
   class="avatar-uploader"
   action="#"
   :show-file-list="false"
   :on-change="handleAvatarChange"
   :before-upload="beforeAvatarUpload"
   :auto-upload="false"
   accept=".jpg,.jpeg,.png"
 >
   <img v-if="imageUrl" :src="imageUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>

handleAvatarChange(file) {
      console.log(file)
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isImage && isLt2M
    },