element-ui中的图片上传-代码详细版_elementui上传图片-优快云博客

本文详细介绍了Vue中实现图片上传功能的方法，包括组件配置、图片预览、上传验证及错误处理等关键步骤。通过具体代码示例展示了如何使用el-upload组件进行图片上传，并实现了上传前的格式与大小校验。

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

   <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                with-credentials //携带cookie
                name="file"
                :action="uploadUrl()" 
                :on-error="uploadError"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                enctype="multipart/form-data">
                <img v-if="imageUrl" :src="noticeImageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

下边是方法，执行顺序：beforeAvatarUpload ---执行action提交----执行handleAvatarSuccess  or uploadError

    uploadUrl() {
        var url = process.env.BASE_API + "url" // 生产环境和开发环境的判断
        return url
    },
    uploadError() {
        this.$message.error('上传失败，请重新上传')
        // this.showNoticeUploading = false
      },
      // 上传图片-成功
      handleAvatarSuccess(res, file) {
        if (this.activeName == '1') {
          this.imageUrl = URL.createObjectURL(file.raw)
          this.showNoticeUploading = false
          this.noticeImageUrl = res
          this.noteInform.templatePicture = res
        } else if (this.activeName == '3') {
          this.markingpic = URL.createObjectURL(file.raw)
          this.showMarkingUploading = false
          this.marketImageUrl = res
          this.marketingInform.templatePicture = res
        }
      },
      // 图片长传-之前
       beforeAvatarUpload(file) {
          this.showNoticeUploading = true
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
            return
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
            return
          }   
      },