element-ui 中使用upload多文件上传只请求一次接口

ethernet 发布于2019-08-02 15:33 / 1768人阅读

摘要：方法一不使用组件内部的钩子选取文件上传到服务器只能上传格式，大小不超过的图片点击上传服务器的按钮时调用这个函数，也就是说不走的钩子，不调用他的方法自己搞在这里对每一张图片进行大小的校验，如果不符合则提示，所有不符合的都提示

方法一
不使用组件内部的钩子


  选取文件
  上传到服务器
  只能上传jpg、png、gif 格式，大小不超过500KB的图片

点击上传服务器的按钮时调用这个函数，也就是说不走upload的钩子，不调用他的方法自己搞
    submitUpload () {
      let { uploadFiles } = this.$refs.upload
      let form = new FormData()
      let status = true
      // 在这里对每一张图片进行大小的校验，如果不符合则提示，所有不符合的都提示，校验完成后只要有不符合条件的就不执行下面的操作
      uploadFiles.forEach(item => {
        const size = item.raw.size / 1024 <= 500
        if (!size) {
          this.$message.error(`${item.raw.name}大小超过500KB`)
          status = false
          return
        }
        form.append("image[]", item.raw)
      })
      if (!status) {
        return
      }
      // 符合条件后再将这个FormData对象传递给后端
      //调取接口上传form参数
     
  }

方法二
使用内部的回调去获取对应的


  选取文件
  上传到服务器
  只能上传jpg、png、gif 格式，大小不超过500KB的图片

beforeImageUpload (file) { // 上传文件前的钩子对文件进行校验
    const size = file.size / 1024 < 500
    if (!size) {
      this.$message.error("上传图片大小不能超过 500KB!")
    }
    return size
}

上传前钩子返回false之后给文件就不会再往下执行下面的钩子了
因此在http-request的钩子就不会被执行，在该钩子中获取到的都是通过校验的file文件的信息

ImageRequest (file) {
    this.formData.append("image[]", file.file)
}

此时在这个formData 中的数据就是通过校验的数据

submitUpload () {
    this.formData = new FormData()
    // 手动触发上传
    this.$refs.upload.submit()
    // 此时所有的钩子已经执行完了formData 中存的是通过校验的数据
    // 此时在调用接口上传该数据
}

该方法在使用时不符合条件的文件会自动删除只留下符合条件的
可能是before-upload这个钩子的原因不符合之后他会去调用删除的钩子
因此使用方法一比这个要好很多
该方法节省了我们自己写样式以及预览，组件都帮你干了，你只要写逻辑就好啦

云服务器 GPU云服务器请求上传接口出现异常只显示一次代码只执行一次 asp只刷新一次

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54205.html

element-ui 中使用upload多文件上传只请求一次接口

摘要：方法一不使用组件内部的钩子选取文件上传到服务器只能上传格式，大小不超过的图片点击上传服务器的按钮时调用这个函数，也就是说不走的钩子，不调用他的方法自己搞在这里对每一张图片进行大小的校验，如果不符合则提示，所有不符合的都提示方法一不使用组件内部的钩子选取文件上传到服务器只能上传jpg、png、gif 格式，大小不超过500KB的图片 js 点击上传服务器的按钮时调...

tomlingtm 2019-08-26 10:11 评论0 收藏0
Element-ui实现合并多图上传（一次请求多张图片）

摘要：实现多图上传主要用到以下两个属性是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求在上传事件触发后，多图上传的默认实现调用了三次请求。前言工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。环境： Springboot+Vue+Element-ui 正文这次上传使用的是Elem...

loostudy 2019-08-19 10:51 评论0 收藏0
element-ui+vue-cli3.0：el-upload

摘要：最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对的上传组件的一些改造，点击查看源码。最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-u...

yy13818512006 2019-08-23 13:50 评论0 收藏0
element-ui上传下载excel（超详细der）

摘要：上传组件点击跳转到该组件官方文档用到的组件参数参数说明类型可选默认值必选参数，上传的地址上传的文件列表接受上传的文件类型覆盖默认的上传行为最大允许上传个数文件超出个数限制时的钩子 1. 上传 EXCEL Upload组件点击跳转到该组件官方文档用到的upload组件参数参数说明类型可选默认值 action 必选参数，上传的地址 string --- --...

Jeffrrey 2019-08-23 15:10 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0