vue element 上传组件进行多文件上传时,before-upload和http-request没有响应?

发布于 2022-09-11 21:19:29 字数 1493 浏览 9 评论 0

在使用element得上传组件,进行多文件上传时,参考了文章:https://www.jb51.net/article/...

具体代码如下:
1、template代码:

<el-upload
          class="upload-image"
          ref="upload"
          multiple
          :action="url"
          list-type="picture"
          :auto-upload="false"
          :before-upload="beforeImageUpload"
          :http-request="ImageRequest"
          accept="image/*">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip">只能上传jpg、png、gif 格式,大小不超过500KB的图片</div>
          </el-upload>

2、methods代码:

// 上传文件前的钩子对文件进行校验
    beforeImageUpload(file) {
      console.log("上传前测试")
      const size = file.size / 1024 < 500
      if (!size) {
        this.$message.error('上传图片大小不能超过 500KB!')
      }
      return size
    },
    //http-request的钩子
    ImageRequest (file) {
      console.log("屏蔽默认上传")
      this.formData.append('image[]', file.file)
    },
    //上传图片:上传到服务器
    submitUpload() {
      console.log("默认上传")
    },

3、点击上传后
图片描述

4、只响应了submitUpload方法,beforeImageUpload和ImageRequest都没响应,是什么问题呢?
图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

把回忆走一遍 2022-09-18 21:19:29

不是应该点击获取文件嘛

夜还是长夜 2022-09-18 21:19:29

submitUpload 里面漏了一句 this.$refs.upload.submit();,否则不会触发文件上传

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文