vue中文件上传显示进度条的使用

发布时间：2024年01月20日

文件上传显示进度条
1、所用到的UI组件

  • el-dialog
  • el-upload
  • el-progress

2、基础用法

  • 样式
<el-dialog
      title="文件上传"
      :visible.sync="excelVisible"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
        <el-upload
          ref="uploadexl"
          style="text-align: center"
          :show-file-list="false"
          :on-error="handleError"
          :on-success="handleSuccess"
          :before-upload="handleBeforeUpload"
          :http-request="uploadSectionFile"
          class="upload-demo"
          drag
          action=""
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">仅限xls和xlsx文件</div>
        </el-upload>

  &lt;div v-show="progressFlag"&gt;
    &lt;el-progress
      :text-inside="true"
      :stroke-width="14"
      :percentage="progressPercent"
    &gt;&lt;/el-progress&gt;
  &lt;/div&gt;
  
&lt;span slot="footer" class="dialog-footer"&gt;
    &lt;el-link target="_blank" style="margin-right: 20px"&gt;
      &lt;el-button size="mini" type="primary" @click="Getdown()"
        &gt;下载模板&lt;/el-button
      &gt;
    &lt;/el-link&gt;
    &lt;el-button size="mini" @click="excelVisibleBtn"&gt;取 消&lt;/el-button&gt;
  &lt;/span&gt;
  &lt;/el-dialog&gt;



 excelVisible: false,
 progressPercent: 0,
 progressFlag: false,

 
 


uploadSectionFile(params) {
      const config = {
        onUploadProgress: (progressEvent) => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小
          this.progressPercent = Number(
            ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2)
          );
        },
      };
      this.progressFlag = true;
      let form = new FormData();
      form.append("file", params.file);
      this.axios
          .post( ``, form,config ).then((res) => {
          this.progressPercent = 100;

      <span class="token punctuation">}</span><span class="token punctuation">)</span>

}

3、百分比定义
this.progressPercent = Number( ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2) );

  • 为了避免出现进度条直接100%但是后端数据还未返回而造成页面卡顿，可以在请求成功后再设置进度条为100%。
  • 如需让进度条显示的时间长一点，可以再成功后，使用计时器的方式进行延迟
文章来源:https://blog.csdn.net/weixin_64310738/article/details/135638076
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章