Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能

 更新时间:2024年08月12日 10:21:37   作者:Mr.app  
这篇文章主要介绍了Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能,本通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

页面代码

</el-form>
          <el-form-item>
            <form id="upload" enctype="multipart/form-data" method="post">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="#"
                :http-request="UploadImage"
                :on-change="fileChange"
                :before-upload="beforeUpload"
              >
                <!--                :before-upload="beforeUpload"-->
                <el-button size="small" type="primary" class="el-icon-upload">&nbsp;&nbsp;数据上传</el-button>
                <!--                <div-->
                <!--                  slot="tip"-->
                <!--                  class="el-upload__tip"-->
                <!--                >只能上传db文件,且不超过一个</div>-->
              </el-upload>
            </form>
          </el-form-item>
          <!--          <el-progress v-if="progressFlag" />-->
          <el-form-item label="当前文件上传进度">
            <el-progress style="width: 200px;margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" />
          </el-form-item>
        </el-form>

script部分

引入axios
import axios from 'axios'

methods代码片段

UploadImage(param) {
      if (this.filterForm.documentType === '') {
        this.$message({
          message: '请选择档案类型后并重新上传',
          type: 'warning'
        })
        return
      } else if (this.filterForm.regTargetArea === '') {
        this.$message({
          message: '请选择区县后并重新上传',
          type: 'warning'
        })
        return
      } else {
        // 上传新文件时,将进度条值置为零
        this.progressPercent = 0
        this.progressFlag = true
        const formdata = new FormData()
        formdata.append('documentType', this.filterForm.documentType)
        formdata.append('upload', param.file)
        axios({
          url: 'url?token=' + this.$store.getters.token,
          method: 'post',
          data: formdata,
          headers: { 'Content-Type': 'multipart/form-data' },
          onUploadProgress: progressEvent => {
            // progressEvent.loaded:已上传文件大小
            // progressEvent.total:被上传文件的总大小
            this.progressPercent = (progressEvent.loaded / progressEvent.total * 100)
            console.info(progressEvent.loaded)
            console.info(progressEvent.total)
          }
        }).then(response => {
          if (response.data.rel) {
            this.$message({
              message: '文件上传成功',
              type: 'success'
            })
            // if (this.progressPercent === 100) {
            //   this.progressFlag = false
            //   this.progressPercent = 0
            // }
            this.logData.upUploadStatus = 1 // 是否上传成功 1 成功 0失败
          } else {
            this.logData.upUploadStatus = 0
          }
          this.logData.upRegion = this.filterForm.regTargetArea // areacode
          this.logData.upFileUrl = response.data.filePath // 上传文件存储路径
          this.logData.upQueryType = this.filterForm.documentType // 档案类型id
          this.logData.upUploadFileSize = response.data.fileSize // 文件大小
          this.logData.upUploadFileName = response.data.fileName // 文件名
          // 文件上传成功后添加日志
          addUpload(this.logData).then(item => {
            console.log('新增文件上传统计日志成功')
          }).catch(res => {
            console.log('新增文件上传统计日志失败')
          })
          param.onSuccess() // 上传成功的文件会显示绿色的对勾
        }).catch(response => {
          this.$message({
            message: '文件上传失败',
            type: 'warning'
          })
        }).then(error => {
          console.log(error)
        })
      }
    }

axios请求后台时,如有鉴权机制记得带上token

文件上传前做文件类型检查

    beforeUpload(file) {
      console.log(file)
      const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'db'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension) {
        this.$message({
          message: '上传文件只能是db格式!',
          type: 'warning'
        })
      }
      // if(!isLt2M) {
      //     this.$message({
      //         message: '上传文件大小不能超过 10MB!',
      //         type: 'warning'
      //     });
      // }
      // return extension || extension2 && isLt2M
      return extension
    }

附上效果图(进度条是实时动态的)

到此这篇关于Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度的文章就介绍到这了,更多相关Vue Element-ui上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vuex与Vue router的使用详细讲解

    Vuex与Vue router的使用详细讲解

    在看这篇文章的几点要求:需要你先知道Vuex与Vue-Router是个什么东西,用来解决什么问题,以及它的基本使用。如果你还不懂的话,建议上官网了解下Vuex与Vue-Router的基本使用后再回来看这篇文章
    2022-11-11
  • vue2 element 实现表格点击详情返回时保留查询参数的示例代码

    vue2 element 实现表格点击详情返回时保留查询参数的示例代码

    这篇文章主要介绍了vue2 element 实现表格点击详情返回时保留查询参数的示例代码,本文通过图文示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue.js -- 过滤器使用总结

    Vue.js -- 过滤器使用总结

    本篇文章主要介绍了Vue.js -- 过滤器使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Vue3新特性之在Composition API中使用CSS Modules

    Vue3新特性之在Composition API中使用CSS Modules

    这篇文章主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue tailwindcss安装配置教程示例详解

    vue tailwindcss安装配置教程示例详解

    这篇文章主要为大家介绍了vue tailwindcss安装配置教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue如何移动到指定位置(scrollIntoView)亲测避坑

    vue如何移动到指定位置(scrollIntoView)亲测避坑

    这篇文章主要介绍了vue如何移动到指定位置(scrollIntoView)亲测避坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 在vue中axios设置timeout超时的操作

    在vue中axios设置timeout超时的操作

    这篇文章主要介绍了在vue中axios设置timeout超时的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue中mapbox地图显示一半的问题及解决方法

    vue中mapbox地图显示一半的问题及解决方法

    在vue中创建mapbox地图,地图只显示一般,查看浏览器开发者工具,发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了,今天小编通过本文给大家分享详细过程,感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • vue组件开发之slider组件使用详解

    vue组件开发之slider组件使用详解

    这篇文章主要为大家详细介绍了vue组件开发之slider组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • vue+quasar使用递归实现动态多级菜单

    vue+quasar使用递归实现动态多级菜单

    这篇文章主要为大家详细介绍了vue+quasar使用递归实现动态多级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论