|
|
@@ -0,0 +1,187 @@
|
|
|
+<template>
|
|
|
+ <div class='full-width custom'>
|
|
|
+ <el-upload ref='upload'
|
|
|
+ :accept="accept"
|
|
|
+ :action="action"
|
|
|
+ :auto-upload='false'
|
|
|
+ :data='data'
|
|
|
+ :file-list="tmpFileList"
|
|
|
+ :headers="headers"
|
|
|
+ :limit="max"
|
|
|
+ :list-type="listType"
|
|
|
+ :multiple="max > 1"
|
|
|
+ :on-change="handleChange"
|
|
|
+ :on-exceed="maxChange"
|
|
|
+ :on-progress="progress"
|
|
|
+ :on-remove="remove"
|
|
|
+ :on-success="success"
|
|
|
+ :show-file-list="showList"
|
|
|
+ style='width: 100%;'>
|
|
|
+ <div class=' flex flex-col flex-justify-start full-width'>
|
|
|
+ <div class='flex flex-align-center flex-justify-start'>
|
|
|
+ <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
|
|
+ <span class='ml-10'>共{{ tmpFileList.length }}个文件,上传速度:{{ speed }}</span>
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <div class='custom full-width' style='height: 300px'>
|
|
|
+ <el-empty v-if='tmpFileList.length === 0' description='暂无文件'/>
|
|
|
+ <div v-else>
|
|
|
+ <div v-for="item in tmpFileList" :key="item.name"
|
|
|
+ class="flex flex-col full-width border-bottom padding-bottom ">
|
|
|
+ <div class='full-width flex flex-justify-between'>
|
|
|
+ <span class="margin text-left font-12 " style="flex:3">{{ item.name }}</span>
|
|
|
+ <span class="margin font-12 text-right" style="flex:1">文件大小:{{ bytesToSize(item.size) }}</span>
|
|
|
+ </div>
|
|
|
+ <el-progress :format='format' :percentage="item.percentage" :show-text='true' :stroke-width='20'
|
|
|
+ class='margin-left margin-right' text-inside></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ <div class='full-width flex flex-justify-end'>
|
|
|
+ <el-button plain size="small" @click='close'>取消上传</el-button>
|
|
|
+ <el-button size="small" type="primary" @click='submint'>开始上传</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {Base64} from 'js-base64'
|
|
|
+import {getToken} from '../utils/auth.js'
|
|
|
+import website from '@/config/website'
|
|
|
+import api from '@/api'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'uploadFile', // 文件上传
|
|
|
+ props: {
|
|
|
+ showBtn: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ showList: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ data: Object,
|
|
|
+ loading: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ accept: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ max: {
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ listType: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ btnText: {
|
|
|
+ type: String,
|
|
|
+ default: '上传'
|
|
|
+ },
|
|
|
+ action: {
|
|
|
+ type: String,
|
|
|
+ default: api.uploadPath
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList: [],
|
|
|
+ tmpFileList: [],
|
|
|
+ oldTimestamp: '',
|
|
|
+ oldLoadsize: 0,
|
|
|
+ speed: '',
|
|
|
+ headers: {
|
|
|
+ 'Authorization': `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
|
|
|
+ 'Blade-Auth': 'bearer ' + getToken()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ format(percentage) {
|
|
|
+ return percentage.toFixed(2) + "%"
|
|
|
+ },
|
|
|
+ progress(event, file, fileList) {
|
|
|
+ this.speed = this.uploadSpeed(event)
|
|
|
+ this.tmpFileList.map(item => {
|
|
|
+ if (item.uid === file.uid) {
|
|
|
+ item.percentage = event.percentage
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ uploadSpeed(evt) {
|
|
|
+ let timestamp = new Date().valueOf();
|
|
|
+ let duration = timestamp - this.oldTimestamp; // 间隔时间(毫秒)
|
|
|
+ if (duration > 0) {
|
|
|
+ let size = evt.loaded - this.oldLoadsize;
|
|
|
+ let bitrate = ((size * 8) / duration / 1024) * 1000; // kbps
|
|
|
+ if (bitrate > 1000) {
|
|
|
+ bitrate = (Math.round(bitrate / 1000) * 0.125).toFixed(2) + "M/s";
|
|
|
+ } else {
|
|
|
+ bitrate = (Math.round(bitrate) * 0.125).toFixed(2) + "K/s";
|
|
|
+ }
|
|
|
+ this.oldLoadsize = evt.loaded;
|
|
|
+ this.oldTimestamp = new Date().valueOf()
|
|
|
+ return bitrate;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bytesToSize(bytes) {
|
|
|
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
|
+ if (bytes === 0) return 'n/a';
|
|
|
+ const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
|
|
+ if (i === 0) return bytes + ' ' + sizes[i];
|
|
|
+ return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
|
|
|
+ },
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ this.tmpFileList = fileList
|
|
|
+ },
|
|
|
+ maxChange() {
|
|
|
+ this.$message.warning(`最多只能上传${this.max}个文件`)
|
|
|
+ },
|
|
|
+ success() {
|
|
|
+ let finishList = this.tmpFileList.filter(sub => sub.status === "success")
|
|
|
+ if (finishList.length === this.tmpFileList.length) {
|
|
|
+ this.$emit('success', {
|
|
|
+ fileList: this.tmpFileList
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.upload.clearFiles()
|
|
|
+ this.tmpFileList = []
|
|
|
+ this.speed = ''
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$refs.upload.abort()
|
|
|
+ this.$refs.upload.clearFiles()
|
|
|
+ this.tmpFileList = []
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ submint() {
|
|
|
+ this.$refs.upload.submit()
|
|
|
+ },
|
|
|
+ remove(file, fileList) {
|
|
|
+ this.$emit('remove', {
|
|
|
+ file: file,
|
|
|
+ fileList: fileList
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+.custom {
|
|
|
+ :deep(.el-upload) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|