修改bug
This commit is contained in:
caoyang
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title">
|
||||
<a-upload-dragger
|
||||
accept='*.*'
|
||||
:disabled="disabled"
|
||||
class="ant-upload-list"
|
||||
name="file"
|
||||
:file-list="myfileList"
|
||||
:multiple="true"
|
||||
:action='uploadAction'
|
||||
:headers="headers"
|
||||
:list-type="listType"
|
||||
@preview="preview"
|
||||
:before-upload="beforeUpload"
|
||||
:remove='remove'
|
||||
@change="handleChange">
|
||||
<p>
|
||||
<a-icon class="action-upload" type="cloud-upload"/>
|
||||
</p>
|
||||
<p class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{this.$t('clickUpload')}}</p>
|
||||
</a-upload-dragger>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'file',
|
||||
props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType','accept','title','listType','splitVisible'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
|
||||
upDataList: [],
|
||||
downLoadFileUrl: window._CONFIG['domianURL'] + '/sys/common/static',
|
||||
fileList: [],
|
||||
myfileList: [],
|
||||
isLoding: false,
|
||||
headers:'',
|
||||
previewImage:{}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||||
this.headers = { 'X-Access-Token': token }
|
||||
this.containerId = 'container-ty-' + new Date().getTime()
|
||||
},
|
||||
mounted() {
|
||||
this.visible=this.splitVisible
|
||||
// console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
|
||||
},
|
||||
methods: {
|
||||
perentHandleFunc(data) {
|
||||
this.myfileList = data
|
||||
if (data && data.length > 0) {
|
||||
this.myfileList.forEach((res) => {
|
||||
res.name = res.fileName
|
||||
res.uid = res.id
|
||||
})
|
||||
} else {
|
||||
this.myfileList = []
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
|
||||
if(file.type.split('/')[0]!='image'){
|
||||
this.$message.warning(this.$t('onlyPicture'))
|
||||
this.fileTypeSatus = false
|
||||
}else{
|
||||
// let thisFileType = this.thisFileType.replace(/\s+/g, "");
|
||||
this.fileTypeSatus = true
|
||||
|
||||
this.$message.destroy()
|
||||
// 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
|
||||
this.errorMessage = file.name + '文件大小超出1000MB限制, 请压缩或降低文件质量!'
|
||||
}
|
||||
|
||||
},
|
||||
remove() {
|
||||
this.fileTypeSatus = true
|
||||
},
|
||||
mypreview(item) {
|
||||
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + item.ext1)
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
handleChange(info) {
|
||||
console.log('file',info)
|
||||
let { file,fileList } = 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 > 1000000000) {
|
||||
this.$message.error(this.errorMessage)
|
||||
return
|
||||
} 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,fileList)
|
||||
if (this.myfileList.length > 0) {
|
||||
this.$message.destroy()
|
||||
this.$message.success(`${info.file.name} `+this.$t('deletedSuccessfully'))
|
||||
}
|
||||
} else if (status === 'done') {
|
||||
this.fileList = []
|
||||
this.myfileList = info.fileList
|
||||
if (info.fileList.length > 20) {
|
||||
info.fileList.splice(20)
|
||||
this.myfileList = info.fileList
|
||||
this.myfileList.forEach((res) => {
|
||||
if (res.response) {
|
||||
this.fileList.push(res.response.result)
|
||||
} else {
|
||||
this.fileList.push(res)
|
||||
}
|
||||
})
|
||||
this.$emit('uploadSuccess', this.fileList,fileList)
|
||||
this.$message.destroy()
|
||||
this.$message.error('最多只能上传二十个')
|
||||
return
|
||||
}
|
||||
this.myfileList.forEach((res) => {
|
||||
if (res.response) {
|
||||
this.fileList.push(res.response.result)
|
||||
} else {
|
||||
this.fileList.push(res)
|
||||
}
|
||||
})
|
||||
this.$emit('uploadSuccess', this.fileList,fileList)
|
||||
if (this.myfileList.length > 0) {
|
||||
this.$message.destroy()
|
||||
this.$message.success(`${info.file.name} `+this.$t('uploadSuccessful'))
|
||||
}
|
||||
} else if (status === 'uploading') {
|
||||
this.myfileList = info.fileList
|
||||
// this.$message.success(`${info.file.name} 文件上传成功。`);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resetFileList() {
|
||||
this.myfileList = []
|
||||
this.fileList = []
|
||||
},
|
||||
preview(file) {
|
||||
console.log('file111',file)
|
||||
this.previewImage = file.response.path;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ant-upload-list-item-name {
|
||||
color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
|
||||
.action-upload {
|
||||
font-size: 67px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user