SoFunction
Updated on 2025-04-06

el-upload implements the function of uploading files and displaying progress bars

el-upload implements uploading files and displaying progress bars

el-upload cannot trigger the on-progress hook when uploading files. Even if the backend interface is called and successful, it cannot be triggered. It can be solved by the following configuration:

const config = {
        onUploadProgress: progressEvent => {
          if () {
             = (( / ) * 100)
            ('progressEvent>>', progressEvent)
            ('uploadProgress>>', _this.uploadProgress)
          }
        }
      }

Then add config to the call to the backend interface to successfully obtain the progress ~

html:

front end-Upload file to get progress bar：
  <el-upload
            v-show="!"
            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" />Upload file</el-button>
            <!--            <el-input v-model="" placeholder="Please select">-->
            <!--              <!–              <template slot="append"><el-button–>-->
            <!--              <!–                size="mini"–>-->
            <!--              <!–              >–>-->
            <!--              <!–                Upload file–>-->
            <!--              <!–              </el-button></template>–>-->
            <!--            </el-input>-->
          </el-upload>
          <!--          <el-button size="small" @click="sendClick">Upload</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">Cancel</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="" class="fail-list">
              <div class="list-item">
                <span :style="{color:showFailTip?'#FF3D00':'#fff' }">
                  <svg-icon :icon-class="showFailTip? 'icon_error_file': 'icon_success_file'" />
                  {{  }}
                </span>
                <span style="float: right;display: flex;align-items: center;">
                  &lt;span style="color: #878D99;display: inline-block;margin-right: 16px">{{ showFailTip ? 'Failed':'Successful' }}</span>                  &lt;!--                  &lt;span&gt;{{ 'fail' }}&lt;/span&gt;--&gt;
                  &lt;el-button style="color: #00E3FF" type="text" size="small" @click="fileList = []">Delete</el-button>                  &lt;el-button v-show="showFailTip" style="color: #00E3FF" type="text" size="small" @click="sendClick">Re-upload</el-button>                &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/template&gt;

JS part

 data() {
    return {
      // Progress bar      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
       = 
       = new FormData()
      ('file', )
      ('md5File', )
       = 
      const config = {
        onUploadProgress: progressEvent =&gt; {
          if () {
            _this.uploadProgress = (( / ) * 100)
            ('progressEvent&gt;&gt;', progressEvent)
            ('uploadProgress&gt;&gt;', _this.uploadProgress)
             = true
            if ( &lt; 99) {
               = _this.uploadProgress
            } else {
               = 'Uploading'
            }
          }
        }
      }
      uploadFile(, config).then(res =&gt; {
        if ( === 'success') {
           = 'Uploaded successfully'
        } else {
           = true
        }
         = false
      })
    },
  }
  },

How to use el-upload

Basic usage method

The basic usage method of el-upload is very simple. Just refer to the examples on the official website. Here are a few commonly used attributes.

&lt;el-col :span="12"&gt;
   &lt;el-form-item label="appendix" prop="attachments"&gt;
     &lt;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"
     &gt;
       &lt;el-button type="text" size="small" icon="el-icon-upload"&gt;Click to upload&lt;/el-button&gt;
     &lt;/el-upload&gt;
   &lt;/el-form-item&gt;
 &lt;/el-col&gt;
  • class: You can modify the style yourself
  • name: This name is very important. If the background is wrong, the file cannot be received. The official explained this way. The uploaded file field name is actually the name of the interface parameter corresponding to the backend. The backend may be defined in this way. Public AjaxResult uploadFile(MultipartFile file) throws Exception
  • action: It is the interface address of the backend receiving file
  • headers: Some programs use tokens as the basis for authentication, and usually put tokens in the header. Headers look like this: headers: { Authorization: this.$ }
  • beforeRemove: Before deletion, a prompt box can pop up, asking if you want to delete it, just like this: return this.$confirm (Confirm to remove ${}?)
  • on-exceed: This is the official explanation of the hook when the number of files exceeds the limit. Generally, this hook is used to pop up a prompt message to tell the user that the number of files exceeds the limit.
  • before-upload: The official explains the hook before uploading the file. The parameter is the uploaded file. If it returns false or returns Promise and is rejected, the upload will be stopped.

Before uploading, we can determine whether the file selected by the user meets the requirements, such as whether the file type is correct, whether the file size exceeds the limit, etc. For example:

handleBeforeUpload(file) {
	  const uploadLimit = 2
	  const uploadTypes = ['jpg', 'png', 'doc', 'docx', 'xlsx', 'zip', 'rar', 'pdf']
      const filetype = (/.+\./, '')
      const isRightSize = ( || 0) / 1024 / 1024 &lt; uploadLimit
      if (!isRightSize) {
        this.$('File size exceeds' + uploadLimit + 'MB')
        return false
      }
      if ((()) === -1) {
        this.$({
          message: 'Please upload attachments with the suffix name jpg, png, txt, pdf, doc, docx, xlsx, zip or rar'
        })
        return false
      }
      return true
    }
  • multiple: Whether to support selecting multiple files
  • file-list: When viewing data, if we want to echo the uploaded file, we need to set this property
fileList = [{name:"appendix",
fileName:"/profile/upload/2020/07/21/"},
{name:"New text document.txt",
fileName:"/profile/upload/2020/07/21/"}]

This is the article about el-upload uploading files and displaying progress bars. For more related el-upload uploading files and displaying progress bars, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!