利用自定义button激活el-upload，能选择文件，但是:http-request失效，不会发送请求

• Z时代
• 2024-02-21
• 分类：IT

我自定义了一个 按钮 去激活 el-upload文件上传，点击按钮 可以 弹出 文件选择框，但是 点确定后，不会去 执行 :http-request="handleAvatarSuccess" 的请求方法，请问要 如何 才 同时激活 这个请求方法。

<el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :http-request="handleAvatarSuccess"
              v-if="src !== ''">
            <el-avatar v-image-preview :size="140" :src="src" class="avatar">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-avatar>
            <button slot="trigger" class="el-icon-edit-outline">更换头像</button>
          </el-upload>

 handleAvatarSuccess (param) {
      let formData = new FormData()
      formData.append('file', param.file)
      this.$axios.post('/upload/userAvatar', formData)
        .then(Response => {
          if (Response.data.code === 200) {
            this.$message({showClose: true, message: '头像上传成功', type: 'success'})
            this.$router.go(0)
          } else {
            this.$message({showClose: true, message: '头像上传失败', type: 'error'})
          }
        })
        .catch(filResponse => {
          this.$router.push({path: '/error'})
        })
    }

点击之后 成功弹出 文件选择框，但是不会 执行 :http-request="handleAvatarSuccess"

回答：

替换成

问题 已解决，将普通 button换成 el-button 就生效了，但我不知道是什么原因，为什么 普通 button不能起作用呢？

以上是 利用自定义button激活el-upload，能选择文件，但是:http-request失效，不会发送请求 的全部内容， 来源链接： utcz.com/p/937085.html