el-upload实现上传文件并展示进度条功能

更新时间：2023年05月24日 14:40:37 作者：满城风絮，梅子黄时雨

这篇文章主要介绍了el-upload实现上传文件并展示进度条，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

el-upload实现上传文件并展示进度条

el-upload在实现文件上传时无法触发on-progress钩子，即使调用后端接口并成功的情况下都无法触发，可以通过如下配置来解决：

const config = {
        onUploadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
            console.log('progressEvent>>', progressEvent)
            console.log('uploadProgress>>', _this.uploadProgress)
          }
        }
      }

随后将config添加至调用后端接口，即可成功获取进度~

html:

前端-上传文件获取进度条：
  <el-upload
            v-show="!fileList.length"
            ref="fileUpload"
            class="upload-demo"
            style="display: inline-block;height: 32px;margin-left: 8px"
            action="#"
            :file-list="fileList"
            :http-request="uploadVersion"
            :on-change="handleChange"
            :on-success="handleSuccess"
            :on-progress="handleProgress"
            :on-error="handleError"
            :auto-upload="true"
            :show-file-list="false"
          >
            <!--            icon_upload.svg-->
            <el-button type="primary" style="height: 32px;display: flex;align-items: center"><svg-icon icon-class="icon_upload" style="margin-right: 8px" />上传文件</el-button>
            <!--            <el-input v-model="uploadForm.filename" placeholder="请选择">-->
            <!--              &lt;!&ndash;              <template slot="append"><el-button&ndash;&gt;-->
            <!--              &lt;!&ndash;                size="mini"&ndash;&gt;-->
            <!--              &lt;!&ndash;              >&ndash;&gt;-->
            <!--              &lt;!&ndash;                上传文件&ndash;&gt;-->
            <!--              &lt;!&ndash;              </el-button></template>&ndash;&gt;-->
            <!--            </el-input>-->
          </el-upload>
          <!--          <el-button size="small" @click="sendClick">上传</el-button>-->
          <div v-if="fileElProgress">
            <div class="el-progress-div">
              <div><div
                v-loading="true"
                style="display: inline-block;width: 24px;
             height: 16px;
             padding-right: 8px;"
              />{{ fileName }}</div>
              <span>
                <span style="display: inline-block;margin-right: 8px">{{ progressPercent }}%</span>
                <el-button type="text" @click="cancelUpload">取消</el-button>
              </span>
            </div>
            <el-progress :percentage="progressPercent" :text-inside="false" :color="customColors" :stroke-width="2" />
            <!--            :stroke-width="16" status="scuccess"-->
          </div>
          <template v-if="!fileElProgress">
            <div v-for="item in fileList" :key="item.name" class="fail-list">
              <div class="list-item">
                <span :style="{color:showFailTip?'#FF3D00':'#fff' }">
                  <svg-icon :icon-class="showFailTip? 'icon_error_file': 'icon_success_file'" />
                  {{ item.name }}
                </span>
                <span style="float: right;display: flex;align-items: center;">
                  <span style="color: #878D99;display: inline-block;margin-right: 16px">{{ showFailTip ? '失败':'成功' }}</span>
                  <!--                  <span>{{ '失败' }}</span>-->
                  <el-button style="color: #00E3FF" type="text" size="small" @click="fileList = []">删除</el-button>
                  <el-button v-show="showFailTip" style="color: #00E3FF" type="text" size="small" @click="sendClick">重新上传</el-button>
                </span>
              </div>
            </div>
          </template>

JS部分

 data() {
    return {
      // 进度条
      fileList: [],
      showFailTip: false,
      customColors: [
        { color: 'rgba(223,228,237,0.10)', percentage: 0 },
        { color: '#00adc9', percentage: 100 }
      ],
      fileElProgress: false,
      fileProgressText: '',
      progressPercent: 0,
     }
  methodss:{
   uploadVersion(params) {
      const _this = this
      this.uploadForm.filename = params.file.name
      this.fileFormData = new FormData()
      this.fileFormData.append('file', params.file)
      this.fileFormData.append('md5File', params.file)
      this.fileName = params.file.name
      const config = {
        onUploadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            _this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
            console.log('progressEvent>>', progressEvent)
            console.log('uploadProgress>>', _this.uploadProgress)
            this.fileElProgress = true
            if (this.progressPercent < 99) {
              this.progressPercent = _this.uploadProgress
            } else {
              this.fileProgressText = '正在上传'
            }
          }
        }
      }
      uploadFile(this.fileFormData, config).then(res => {
        if (res.data === 'success') {
          this.fileProgressText = '上传成功'
        } else {
          this.showFailTip = true
        }
        this.fileElProgress = false
      })
    },
  }
  },

el-upload的使用方法

基本使用方法

el-upload的基本使用方法很简单，参考官网的例子即可，这里记录几个常用的属性

<el-col :span="12">
   <el-form-item label="附件" prop="attachments">
     <el-upload
       class="upload"
       name="file"
       :action="doUpload"
       :headers="headers"
       :before-remove="beforeRemove"
       :limit="3"
       :on-exceed="handleExceed"
       :before-upload="handleBeforeUpload"
       :on-success="uploadSuccess"
       :multiple="true"
       :file-list="fileList"
     >
       <el-button type="text" size="small" icon="el-icon-upload">点击上传</el-button>
     </el-upload>
   </el-form-item>
 </el-col>

class：可以自己修改一下样式
name：这个name很重要，错了后台接收不到文件，官方是这样解释的上传的文件字段名 ,实际上就是后端对应的接口参数的名字，后端可能是这么定义的 public AjaxResult uploadFile(MultipartFile file) throws Exception
action：就是后端接收文件的接口地址
headers：有些程序用token作为鉴权依据，通常把token放在header中，headers长这样子：headers: { Authorization: this.$store.getters.token }
beforeRemove：删除之前可以弹出个提示框，问问要不要删除，就像这样： return this.$confirm(确定移除 ${file.name}？)
on-exceed：官方这么解释文件超出个数限制时的钩子 ,一般应用这个钩子弹出一个提示信息，告诉用户文件个数超过限制了
before-upload：官方这么解释上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

我们可以在上传之前判断一下用户选择的文件是不是符合要求，比如文件类型是否正确、文件大小是否超限等。例如：

handleBeforeUpload(file) {
	  const uploadLimit = 2
	  const uploadTypes = ['jpg', 'png', 'doc', 'docx', 'xlsx', 'zip', 'rar', 'pdf']
      const filetype = file.name.replace(/.+\./, '')
      const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
      if (!isRightSize) {
        this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
        return false
      }
      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message: '请上传后缀名为jpg、png、txt、pdf、doc、docx、xlsx、zip或rar的附件'
        })
        return false
      }
      return true
    }

multiple：是否支持选择多个文件
file-list：在查看数据的时候，如果我们要回显已经上传的文件，就需要设置这个属性了

fileList = [{name:"附件4.png",
fileName:"/profile/upload/2020/07/21/7e6735cbc848c40a2f2242b56d09fe58.png"},
{name:"新建文本文档.txt",
fileName:"/profile/upload/2020/07/21/34c6389353856c9429405360eaec864d.txt"}]

到此这篇关于el-upload实现上传文件并展示进度条的文章就介绍到这了,更多相关el-upload上传文件并展示进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解原生js实现offset方法
本篇文章主要介绍了原生js实现offset方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
BootstrapVue选项卡标题增加关闭按钮的方法
这篇文章主要为大家详细介绍了BootstrapVue选项卡标题增加关闭按钮的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
JavaScript实现前端飞机大战小游戏
这篇文章主要为大家详细介绍了JavaScript实现前端飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JavaScript中的函数声明和函数表达式区别浅析
这篇文章主要介绍了JavaScript中的函数声明和函数表达式区别浅析,本文总结的浅显易懂,非常好的一篇技术文章,需要的朋友可以参考下
2015-03-03
uniapp图片展示自适应等比例缩放方法举例
这篇文章主要给大家介绍了关于uniapp图片展示自适应等比例缩放方法的相关资料,在uniapp页面展示中会遇到图片展示问题,等比缩放或者自适应view大小,需要的朋友可以参考下
2023-10-10
iframe实用操作锦集
这篇文章主要介绍了有关iframe的实用操作，包括高度、传递数据等等，感兴趣的朋友可以参考下
2014-04-04
JavaScript工具库jscpd检测前端代码重复度
在前端开发中,代码的重复度是一个常见的问题,重复的代码不仅增加了代码的维护成本,还可能导致程序的低效运行,为了解决这个问题,有许多工具和技术被用来检测和消除代码重复,其中一个被广泛使用的工具就是jscpd
2023-10-10
JavaScript中var与let的区别
这篇文章主要介绍了JavaScript中var与let的区别，var是JavaScript刚出现时就存在的变量声明关键字，而let作为ES6才出现的变量声明关键字，无疑两者之间存在着很大的区别，下面来看看两者之间到底存在什么
2021-12-12
ES6学习教程之对象的扩展详解
这篇文章主要给大家介绍了ES6中对象扩展的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
Webpack devServer中的 proxy 实现跨域的解决
这篇文章主要介绍了Webpack devServer中的 proxy 实现跨域的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06