|
|
|
@ -1,13 +1,12 @@ |
|
|
|
<template> |
|
|
|
<div class="components_upload"> |
|
|
|
<div v-if="isTheme"> |
|
|
|
<!-- <div v-if="isTheme"> |
|
|
|
<el-button class="cont_upload_btn" round type="primary">选择文件</el-button> |
|
|
|
<input id="upFile" ref="inputfile" type="file" name="upFile" @change="changeFile($event)" /> |
|
|
|
</div> |
|
|
|
<el-button v-if="!isTheme" class="cont_upload_btn" round type="primary">上传</el-button> |
|
|
|
<input v-if="!isTheme" id="upFile" type="file" name="upFile" @change="changeFile($event)" /> |
|
|
|
<!-- <input type="button" name="开始上传" value="开始上传" class="start_upload" @click="uploadFile()" /> --> |
|
|
|
<!-- <img v-if="coverUrl" :src="coverUrl" alt="封面" /> --> |
|
|
|
</div> --> |
|
|
|
<el-button class="cont_upload_btn" round type="primary">{{ isTheme ? '选择文件' : '上传' }}</el-button> |
|
|
|
<input id="upFile" type="file" name="upFile" @change="changeFile($event)" /> |
|
|
|
<input v-if="isTheme" type="button" name="开始上传" value="开始上传" class="start_upload" @click="uploadFile()" /> |
|
|
|
|
|
|
|
<!-- 上传列表layer --> |
|
|
|
<div v-if="!isTheme" class="upload_layer"> |
|
|
|
@ -22,32 +21,33 @@ |
|
|
|
<el-table-column align="center" prop="fileNames" label="文件名" /> |
|
|
|
<el-table-column align="center" prop="formatType" label="类型" /> |
|
|
|
<el-table-column align="center" prop="fileSize" label="大小" /> |
|
|
|
<el-table-column align="center" prop="filePercent" label="状态"> |
|
|
|
<template> |
|
|
|
<el-table-column align="center" prop="filePercentTxt" label="状态"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div class="loadingModal" :style="{ 'height': '100%' }"> |
|
|
|
<el-progress |
|
|
|
v-if="scope.row.filePercent != 0 && scope.row.filePercent != 100" |
|
|
|
:stroke-width="6" |
|
|
|
:percentage="filePercent" |
|
|
|
:color="colors" |
|
|
|
:percentage="scope.row.filePercent" |
|
|
|
/> |
|
|
|
<span v-else>{{ scope.row.filePercentTxt }}</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" prop="handle" label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
<!-- <el-button |
|
|
|
type="primary" |
|
|
|
round |
|
|
|
class="on_off_btn" |
|
|
|
style="width: 50px; display: inline-block;" |
|
|
|
@click="end(scope.$index, scope.row)" |
|
|
|
>{{ loading_txt }}</el-button> |
|
|
|
@click="controlUpload(scope.$index)" |
|
|
|
>{{ uploadStatus ?'暂停':'继续' }}</el-button> --> |
|
|
|
<el-button |
|
|
|
type="info" |
|
|
|
round |
|
|
|
style="width: 50px; display: inline-block;" |
|
|
|
class="upload_delt" |
|
|
|
@click="handleRecord(scope.$index, scope.row)" |
|
|
|
@click="deltUpload(scope.$index)" |
|
|
|
>删除</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
@ -66,8 +66,7 @@ |
|
|
|
<script> |
|
|
|
import * as qiniu from 'qiniu-js' |
|
|
|
import { getQiniuToken, FectchUploadTokenAndOps } from '@/api/upload/upload' |
|
|
|
// var observable |
|
|
|
|
|
|
|
let observable |
|
|
|
export default { |
|
|
|
name: 'Qiniu', |
|
|
|
props: { |
|
|
|
@ -82,51 +81,51 @@ export default { |
|
|
|
token: '', |
|
|
|
baseurl: 'qiniu.aiyxlib.com', |
|
|
|
fileData: [], |
|
|
|
uploadFileUrl: null, |
|
|
|
filePercent: 0, |
|
|
|
fileNames: '', |
|
|
|
formatType: '', |
|
|
|
postfix: '', |
|
|
|
fileSize: '', |
|
|
|
duration: 0, |
|
|
|
uploadListVisible: false, |
|
|
|
loading_txt: '暂停', |
|
|
|
colors: '#1e9f4c', |
|
|
|
uploadListData: [], |
|
|
|
filePercentTxt: '上传中', |
|
|
|
subscription: '', |
|
|
|
uploadFileUrl: null, |
|
|
|
filePercent: 0, |
|
|
|
uploadStatus: false, |
|
|
|
isActiveType: null |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getQiniuToken() |
|
|
|
localStorage.removeItem('compareName') |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
changeFile(e) { |
|
|
|
// 获取文件 |
|
|
|
this.file = e.target.files[0] |
|
|
|
console.log(this.file) |
|
|
|
this.$emit('getName', this.file.name) |
|
|
|
this.formatType = this.file.type.substring(0, this.file.type.indexOf('/')) |
|
|
|
if (this.isActiveType == 0) { |
|
|
|
this.$message.error('请上传图片文件！') |
|
|
|
return |
|
|
|
if (this.formatType != 'image') { |
|
|
|
this.$message.error('请上传图片文件！') |
|
|
|
return |
|
|
|
} |
|
|
|
} else if (this.isActiveType == 1) { |
|
|
|
this.$message.error('请上传视频文件！') |
|
|
|
return |
|
|
|
if (this.formatType != 'video') { |
|
|
|
this.$message.error('请上传视频文件！') |
|
|
|
return |
|
|
|
} |
|
|
|
} else if (this.isActiveType == 2) { |
|
|
|
this.$message.error('请上传音频文件！') |
|
|
|
return |
|
|
|
if (this.formatType != 'audio') { |
|
|
|
this.$message.error('请上传音频文件！') |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
this.formatType = this.file.type.substring(0, this.file.type.indexOf('/')) |
|
|
|
console.log('formatType', this.formatType) |
|
|
|
this.fileNames = this.file.name |
|
|
|
console.log('fileNames', this.fileNames) |
|
|
|
this.postfix = this.fileNames.substring( |
|
|
|
this.fileNames.lastIndexOf('.') + 1, |
|
|
|
this.fileNames.length |
|
|
|
) |
|
|
|
console.log(this.postfix) |
|
|
|
this.fileSize = this.file.size |
|
|
|
console.log('fileSize', this.fileSize) |
|
|
|
|
|
|
|
if (this.formatType === 'image') { |
|
|
|
const isJPG = this.file.type === 'image/jpeg' || this.file.type === 'image/png' || this.file.type === 'image/bmp' || this.file.type === 'image/gif' |
|
|
|
const isLt2M = this.file.size / 1024 / 1024 < 4 |
|
|
|
@ -137,16 +136,30 @@ export default { |
|
|
|
this.$message.error('图片大小不能超过 4MB !') |
|
|
|
} |
|
|
|
} |
|
|
|
this.fileData.push({ |
|
|
|
fileNames: this.fileNames, |
|
|
|
formatType: this.formatType, |
|
|
|
fileSize: this.fileSize, |
|
|
|
filePercent: this.filePercent |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
this.uploadFile() |
|
|
|
}, 1000) |
|
|
|
console.log(this.fileData) |
|
|
|
const isRepeat = this.fileData.map(item => item.key).indexOf(this.fileNames) |
|
|
|
if (isRepeat == -1) { |
|
|
|
this.fileData.push({ |
|
|
|
fileNames: this.fileNames, |
|
|
|
formatType: this.formatType, |
|
|
|
fileSize: this.fileSize, |
|
|
|
filePercent: 0, |
|
|
|
filePercentTxt: '上传中', |
|
|
|
key: this.fileNames, |
|
|
|
uploadStatus: false |
|
|
|
}) |
|
|
|
if (!this.isTheme) { |
|
|
|
setTimeout(() => { |
|
|
|
this.uploadFile() |
|
|
|
}, 1000) |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (!this.isTheme) { |
|
|
|
this.$message({ |
|
|
|
message: '该素材上传列表内已存在~', |
|
|
|
type: 'info' |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
// this.getOpsToken() |
|
|
|
this.uploadListVisible = true |
|
|
|
}, |
|
|
|
@ -178,7 +191,7 @@ export default { |
|
|
|
retryCount: 3 |
|
|
|
} |
|
|
|
const token = this.token |
|
|
|
const observable = qiniu.upload( |
|
|
|
observable = qiniu.upload( |
|
|
|
this.file, |
|
|
|
name, |
|
|
|
token, |
|
|
|
@ -199,6 +212,10 @@ export default { |
|
|
|
uploadFile() { |
|
|
|
// 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。 |
|
|
|
const _this = this |
|
|
|
_this.filePercent = 0 |
|
|
|
_this.uploadStatus = false |
|
|
|
let compareChunks = [] |
|
|
|
var finishedAttr = [] |
|
|
|
// 获取身份的token |
|
|
|
const token = _this.token |
|
|
|
// 上传时的配置 |
|
|
|
@ -212,47 +229,76 @@ export default { |
|
|
|
mimeType: null |
|
|
|
} |
|
|
|
// 实例化七牛云的上传实例 |
|
|
|
var observable = qiniu.upload(_this.file, _this.file.name, token, putExtra, { resumingByFileSize: 4 * 1024 * 1024 }, config) |
|
|
|
observable = qiniu.upload(_this.file, _this.file.name, token, putExtra, { resumingByFileSize: 4 * 1024 * 1024 }, config) |
|
|
|
// 设置实例的监听对象 |
|
|
|
var observer = { |
|
|
|
// 接收上传进度信息 |
|
|
|
next(res) { |
|
|
|
// 上传进度 |
|
|
|
_this.filePercent = parseInt(res.total.percent) |
|
|
|
// _this.filePercentTxt = '上传中' |
|
|
|
// if (_this.filePercent == 100) { |
|
|
|
// _this.filePercentTxt = '上传成功' |
|
|
|
// } |
|
|
|
_this.fileData.forEach(item => { |
|
|
|
console.log(item) |
|
|
|
item.filePercent = parseInt(res.total.percent) |
|
|
|
}) |
|
|
|
_this.$set(_this.fileData, 0, _this.fileData[0]) |
|
|
|
}, |
|
|
|
// 接收上传错误信息 |
|
|
|
error(err) { |
|
|
|
console.log(err) |
|
|
|
}, |
|
|
|
|
|
|
|
// 接收上传完成后的信息 |
|
|
|
complete(res) { |
|
|
|
_this.filePercentTxt = '上传成功' |
|
|
|
_this.fileData[0].filePercentTxt = _this.filePercentTxt |
|
|
|
_this.uploadFileUrl = 'http://' + _this.baseurl + '/' + res.key |
|
|
|
// 上传完成后调用保存素材方法 |
|
|
|
_this.getVideoDuration(_this.uploadFileUrl) |
|
|
|
setTimeout(() => { |
|
|
|
_this.$emit('saveMaterial') |
|
|
|
}, 200) |
|
|
|
document.getElementById('upFile').value = '' |
|
|
|
document.getElementById('upLoadFile').value = '' |
|
|
|
localStorage.setItem('currentFile', _this.file.name) |
|
|
|
// 接收上传进度信息 |
|
|
|
var next = function(res) { |
|
|
|
const currentFile = localStorage.getItem('currentFile') |
|
|
|
const index = _this.fileData.map((item) => item.key).indexOf(currentFile) |
|
|
|
var chunks = res.chunks || [] |
|
|
|
var total = res.total |
|
|
|
// 这里对每个chunk更新进度，并记录已经更新好的避免重复更新，同时对未开始更新的跳过 |
|
|
|
for (var i = 0; i < chunks.length; i++) { |
|
|
|
if (chunks[i].percent === 0 || finishedAttr[i]) { |
|
|
|
continue |
|
|
|
} |
|
|
|
if (compareChunks[i].percent === chunks[i].percent) { |
|
|
|
continue |
|
|
|
} |
|
|
|
if (chunks[i].percent === 100) { |
|
|
|
finishedAttr[i] = true |
|
|
|
} |
|
|
|
} |
|
|
|
compareChunks = chunks |
|
|
|
_this.filePercent = parseInt(total.percent) |
|
|
|
_this.$nextTick(function() { |
|
|
|
_this.fileData[index].filePercent = _this.filePercent |
|
|
|
}) |
|
|
|
} |
|
|
|
// 接收上传错误信息 |
|
|
|
var error = function(err) { |
|
|
|
console.log(err) |
|
|
|
} |
|
|
|
// 接收上传完成后的信息 |
|
|
|
var complete = function(res) { |
|
|
|
const index = _this.fileData.map((item) => item.key).indexOf(res.key) |
|
|
|
_this.uploadFileUrl = 'http://' + _this.baseurl + '/' + res.key |
|
|
|
// 上传完成后调用保存素材方法 |
|
|
|
_this.getVideoDuration(_this.uploadFileUrl) |
|
|
|
_this.$nextTick(function() { |
|
|
|
_this.fileData[index].filePercentTxt = '上传成功' |
|
|
|
_this.fileData[index].filePercent = 100 |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
_this.$emit('saveMaterial') |
|
|
|
}, 200) |
|
|
|
document.getElementById('upFile').value = '' |
|
|
|
document.getElementById('upLoadFile').value = '' |
|
|
|
localStorage.removeItem('currentFile') |
|
|
|
// localStorage.removeItem('currentCompareName') |
|
|
|
} |
|
|
|
var subObject = { |
|
|
|
next: next, |
|
|
|
error: error, |
|
|
|
complete: complete |
|
|
|
} |
|
|
|
_this.controlUpload = function() { |
|
|
|
_this.uploadStatus = !_this.uploadStatus |
|
|
|
if (_this.uploadStatus) { |
|
|
|
_this.subscription = observable.subscribe(subObject) // 调用sdk上传接口获得相应的observable，控制上传和暂停 |
|
|
|
} else { |
|
|
|
_this.subscription.unsubscribe() |
|
|
|
} |
|
|
|
} |
|
|
|
_this.controlUpload() |
|
|
|
// 上传开始 |
|
|
|
var subscription = observable.subscribe(observer) |
|
|
|
// subscription.unsubscribe() 停止当前文件上传 |
|
|
|
// subscription = observable.subscribe(observer) |
|
|
|
}, |
|
|
|
deltUpload(index) { |
|
|
|
this.subscription.unsubscribe() |
|
|
|
this.fileData.splice(index, 1) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -260,7 +306,6 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
.components_upload{ |
|
|
|
position: relative; |
|
|
|
// width: 100%; |
|
|
|
} |
|
|
|
#upFile, |
|
|
|
#upLoadFile{ |
|
|
|
@ -296,5 +341,12 @@ export default { |
|
|
|
width: 60px; |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-progress-bar__outer{ |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
::v-deep .el-progress-bar__inner { |
|
|
|
background-image: linear-gradient(to right, #40cbfe, #3a8aeb) |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
