151 lines
4.3 KiB
Vue
151 lines
4.3 KiB
Vue
<template>
|
|
<div class="split-import-upload">
|
|
<a-upload
|
|
accept=".zip"
|
|
:disabled="disabled"
|
|
class="ant-upload-list"
|
|
name="file"
|
|
:list-type="listType"
|
|
:file-list="myFileList"
|
|
:multiple="false"
|
|
:action="uploadAction"
|
|
:headers="headers"
|
|
:before-upload="beforeUpload"
|
|
:remove='remove'
|
|
@change="handleChange">
|
|
<div class="operator-text">
|
|
<a-icon type="export" :rotate="-90"/>
|
|
拆分文件
|
|
</div>
|
|
</a-upload>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
|
|
export default {
|
|
name: 'SplitUpload',
|
|
props: ['disabled', 'listType'],
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
uploadAction: window._CONFIG.domianURL + '/sys/common/upload',
|
|
myFileList: [],
|
|
fileList: [],
|
|
fileTypeStatus: false,
|
|
headers: {}
|
|
}
|
|
},
|
|
created () {
|
|
const token = Vue.ls.get(ACCESS_TOKEN)
|
|
this.headers = { 'X-Access-Token': token }
|
|
},
|
|
methods: {
|
|
beforeUpload (file, fileList) {
|
|
console.log('file', this.accept, file, fileList, this.myFileList)
|
|
this.fileTypeSatus = false
|
|
if (this.myFileList && this.myFileList.length >= 1) {
|
|
this.$message.warning(this.$t('onlyOnefileUploaded'))
|
|
return false
|
|
} else {
|
|
const suffix = file.name.split('.')
|
|
const acceptSuffix = suffix[suffix.length - 1]
|
|
if (acceptSuffix.toLowerCase() === 'zip') {
|
|
this.fileTypeSatus = true
|
|
this.$message.destroy()
|
|
// 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
|
|
this.errorMessage = file.name + '文件大小超出100MB限制, 请压缩或降低文件质量!'
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
remove () {
|
|
this.fileTypeSatus = true
|
|
},
|
|
handleChange (info) {
|
|
const { file } = info
|
|
const status = info.file.status
|
|
info.fileList.forEach((val, index) => {
|
|
if (val.response && !val.response.result) {
|
|
this.$message.error(val.response.message)
|
|
info.fileList.splice(index, 1)
|
|
}
|
|
})
|
|
if (this.fileTypeSatus) {
|
|
if (file.size > 100000000) {
|
|
this.$message.error(this.errorMessage)
|
|
} else {
|
|
if (status === 'error') {
|
|
this.$emit('uploadSuccess', this.fileList)
|
|
this.$message.destroy()
|
|
this.$message.error(`${info.file.name}` + this.$t('fileUploadFailed'))
|
|
} else if (status === 'removed') {
|
|
this.myFileList = info.fileList
|
|
this.fileList = []
|
|
this.myFileList.forEach((res) => {
|
|
if (res.response) {
|
|
this.fileList.push(res.response.result)
|
|
} else {
|
|
this.fileList.push(res)
|
|
}
|
|
})
|
|
this.$emit('uploadSuccess', this.fileList)
|
|
this.$message.destroy()
|
|
this.$message.success(`${info.file.name}` + this.$t('deletedSuccessfully'))
|
|
} else if (status === 'done') {
|
|
this.fileList = []
|
|
this.myFileList = info.fileList
|
|
this.myFileList.forEach((res) => {
|
|
if (res.response) {
|
|
this.fileList.push(res.response.result)
|
|
} else {
|
|
this.fileList.push(res)
|
|
}
|
|
})
|
|
if (this.myFileList.length > 0) {
|
|
this.$emit('uploadSuccess', this.fileList)
|
|
this.$message.destroy()
|
|
this.$message.success(`${info.file.name}` + this.$t('uploadSuccessful'))
|
|
}
|
|
} else if (status === 'uploading') {
|
|
this.myFileList = info.fileList
|
|
this.$emit('uploadSuccess')
|
|
}
|
|
}
|
|
} else if (!this.fileTypeSatus && this.myFileList.length < 1) {
|
|
this.$message.warning(this.$t('typeCannotUploaded'))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.split-import-upload {
|
|
/deep/ .ant-upload-list-item {
|
|
position: relative;
|
|
height: 22px;
|
|
margin-top: -22px;
|
|
font-size: 14px;
|
|
margin-right: 100px;
|
|
}
|
|
/deep/ .ant-upload-list-item-info {
|
|
span {
|
|
display: flex;
|
|
justify-content: start;
|
|
text-align: right;
|
|
|
|
.ant-upload-list-item-name {
|
|
margin-right: 20px;
|
|
max-width: 800px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|