javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > el-upload上传文件并展示进度条

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

作者:满城风絮,梅子黄时雨

这篇文章主要介绍了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>

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

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
    }
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上传文件并展示进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文