快捷導航

el-upload實現(xiàn)上傳文件并展示進度條功能

更新時間：2023年05月24日 14:40:37 作者：滿城風絮，梅子黃時雨

這篇文章主要介紹了el-upload實現(xiàn)上傳文件并展示進度條，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

el-upload實現(xiàn)上傳文件并展示進度條

el-upload在實現(xiàn)文件上傳時無法觸發(fā)on-progress鉤子，即使調(diào)用后端接口并成功的情況下都無法觸發(fā)，可以通過如下配置來解決：

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添加至調(diào)用后端接口，即可成功獲取進度~

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的基本使用方法很簡單，參考官網(wǎng)的例子即可，這里記錄幾個常用的屬性

<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很重要，錯了后臺接收不到文件，官方是這樣解釋的上傳的文件字段名 ,實際上就是后端對應(yīng)的接口參數(shù)的名字，后端可能是這么定義的 public AjaxResult uploadFile(MultipartFile file) throws Exception
action：就是后端接收文件的接口地址
headers：有些程序用token作為鑒權(quán)依據(jù)，通常把token放在header中，headers長這樣子：headers: { Authorization: this.$store.getters.token }
beforeRemove：刪除之前可以彈出個提示框，問問要不要刪除，就像這樣： return this.$confirm(確定移除 ${file.name}？)
on-exceed：官方這么解釋文件超出個數(shù)限制時的鉤子 ,一般應(yīng)用這個鉤子彈出一個提示信息，告訴用戶文件個數(shù)超過限制了
before-upload：官方這么解釋上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 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：在查看數(shù)據(jù)的時候，如果我們要回顯已經(jīng)上傳的文件，就需要設(shè)置這個屬性了

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

到此這篇關(guān)于el-upload實現(xiàn)上傳文件并展示進度條的文章就介紹到這了,更多相關(guān)el-upload上傳文件并展示進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: