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

我自定义了一个 按钮 去激活 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>

image.png

 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'})
        })
    }

image.png

image.png

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

image.png

阅读 2.8k
1 个回答

image.png

替换成

image.png

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题