ElementUI - 自定義上傳文件 & 自定義進度條

上傳文件按鈕

<el-upload class="upload" action="" style="float:left;" multiple :http-request="uploadFile" :show-file-list="false">
	<el-button type="primary">上傳文件<i class="el-icon-upload el-icon--right"></i></el-button>
</el-upload>

顯示文件上傳進度

<el-card class="box-card" v-if="showProgress" :class="cardClass">
    <div slot="header" class="clearfix">
        <span>上傳進度</span>
        <el-button style="float: right; padding: 3px 3px; margin-left: 10px" type="text" @click="closeProgress">關閉</el-button>
        <el-button style="float: right; padding: 3px 3px; margin-left: 10px" type="text" @click="maximize">還原</el-button>
        <el-button style="float: right; padding: 3px 3px; margin-right: 10px" type="text" @click="minimize">收起</el-button>
    </div>
    <el-table tooltip-effect="dark" :data="fileList" max-height="300px" :fit="true">
        <el-table-column width="30px" text-align="left" prop="name">
            <i class="el-icon-document" style="float:left"></i>
        </el-table-column>
        <el-table-column width="250px" text-align="left">
        	<!--進度條-->
            <template slot-scope="scope">
            <MyProgressBar :percentage="scope.row.progress" :strokeWidth="5" :reload="reload" />
            </template>
        </el-table-column>
        <el-table-column width="50px" text-align="left">
            <template slot-scope="scope">
            <el-button circle type="text" style="float: right; padding: 3px 3px; margin-left: 10px" @click="cancelUpload(scope.row.uid)"><i class="el-icon-close" style="float:left"></i></el-button>
            </template>
        </el-table-column>
    </el-table>
</el-card>

自定義上傳

export default {
    name: 'MainComponent',
    components: {
      MyProgressBar     // 自定義進度條
    },
    data () {
      return {
        ...
        fileList: [],
        showProgress: false,
        reload: false
      }
    },
    methods: {
      ...
      // 上傳文件
      uploadFile: function (item) {
        this.showProgress = true
        let file = item.file
        this.fileList.push(file)
        let form = new FormData()
        form.append('file', file)
        let cancelToken = axios.CancelToken
        file.source = cancelToken.source()
        uploadFileRequest('/api/file/upload_files/', form, file.source, progress => {
          this.updateProgress(file, parseInt(progress))
        }).then(data => {
          console.log(data)
        }).catch(error => {
          console.log(error)
        })
      },
      // 更新進度條
      updateProgress: function (file, progress) {
        this.$set(this.fileList.filter(f => f.uid === file.uid)[0], 'progress', progress)
        this.reload = !this.reload	// 讓 MyProgressBar 組件重新加載
      },
      // 取消上傳
      cancelUpload: function (uid) {
        let index = -1
        for (index = 0; index < this.fileList.length; index++) {
          if (this.fileList[index].uid === uid) {
            break
          }
        }
        let file = this.fileList[index]
        if (file.source) {
          file.source.cancel()
          this.fileList.splice(index, 1)
          if (this.fileList.length === 0) {
            this.showProgress = false
          }
        }
      },
      ...
  }

import axios from 'axios'
axios.defaults.timeout = 10000		// 單位：ms（-1 表示無限制）

export const uploadFileRequest = (url, params, source, callback) => {
  return axios({
    method: 'post',
    url: url,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    cancelToken: source.token,
    onUploadProgress (progressEvent) {
      if (progressEvent.lengthComputable) {
        let progress = parseInt(progressEvent.loaded / progressEvent.total * 100).toFixed(0)
        callback(progress)
      }
    }
  })
}

自定義進度條

<template>
  <el-progress :percentage="percentage" :stroke-width="strokeWidth">
  </el-progress>
</template>

<script>
export default {
  name: 'MyProgressBar',
  props: ['reload', 'percentage', 'strokeWidth'],
  watch: {
    reload: function (val) {
      this.$forceUpdate()	// 強制刷新
    }
  }
}
</script>

<style scoped>
</style>