ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug 78088

Browse Source
This commit is contained in:
赵霄
2023-11-01 17:54:04 +08:00
parent 83cc5b2c05
commit 2b2b67aa94
3 changed files with 82 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/UploadFile.vue
+13 -16
View File
@@ -57,18 +57,16 @@ import Vue from 'vue'
const FILE_TYPE_ALL = 'all'
const FILE_TYPE_IMG = 'image'
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png']
const FILE_TYPE_PDF = 'pdf'
// 本系统限制可以上传的文件格式
const CAN_UPLOAD_FILE_TYPE = 'doc,docx,xls,xlsx,pdf,png,jpg'
const CAN_UPLOAD_FILE_TYPE = 'pdf,docx,doc,xlsx,xls,ppt,rar,.zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad'
const Base64 = require('js-base64').Base64
// 支持预览的文件类型
const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image']
// 支持预览的文件后缀
const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv']
const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
export default {
name: 'UploadFile',
@@ -300,10 +298,9 @@ export default {
if (!file || !file.url) {
return
}
const fileType = file.type
// 截取文件后缀名
const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1] : ''
const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.every(tt => fileType.indexOf(tt) === -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase()
const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
// 判断是否为可预览格式的文件
if (!canPreview) {
this.$message.loading(this.$t('uploadFile.cannotPreview')).then(() => {
@@ -314,7 +311,7 @@ export default {
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
console.log(fileSuffix)
// 图片预览，使用自己添加的组件
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix)) {
if (FILE_TYPE_IMGS.includes(fileSuffix)) {
this.imageUrl = getFileAccessHttpUrl(file.response.result.id)
// 获取viewer实例
const viewer = this.$el.querySelector('.image').$viewer
@@ -324,7 +321,7 @@ export default {
return
}
// pdf预览
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
if (FILE_TYPE_PDF.includes(fileSuffix)) {
const url = previewPdf(file.response.result.id)
window.open(url)
return
@@ -363,22 +360,22 @@ export default {
return true
}
const fileType = file.type
if (this.fileType === CAN_UPLOAD_FILE_TYPE && fileType.indexOf('image') !== -1) {
return true
}
// 截取文件后缀名
const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase()
if (this.fileType === CAN_UPLOAD_FILE_TYPE && CAN_UPLOAD_FILE_TYPE.split(',').includes(fileSuffix)) {
return true
}
if (this.fileType === FILE_TYPE_IMG && fileType.indexOf('image') < 0) {
this.$message.warning(this.$t('uploadFile.onlyUploadPic'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
if (this.fileType === FILE_TYPE_IMG && (fileSuffix === 'png' || fileSuffix === 'jpg')) {
if (this.fileType === FILE_TYPE_IMG && FILE_TYPE_IMGS.includes(fileSuffix)) {
return true
}
if (this.fileType === FILE_TYPE_IMG && fileSuffix !== 'png' && fileSuffix !== 'jpg') {
this.$message.warning(this.$t('uploadFile.pleaseUpload') + 'png、jpg' + this.$t('uploadFile.file'))
if (this.fileType === FILE_TYPE_IMG && !FILE_TYPE_IMGS.includes(fileSuffix)) {
this.$message.warning(this.$t('uploadFile.pleaseUpload') + FILE_TYPE_IMGS.join('、') + this.$t('uploadFile.file'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
src/components/jero/JUpload.vue
+68 -37
View File
@@ -6,7 +6,7 @@
:headers="headers"
:data="{'biz':bizPath}"
:fileList="fileList"
:beforeUpload="beforeUpload"
:beforeUpload="doBeforeUpload"
@change="handleChange"
:disabled="disabled"
:returnUrl="returnUrl"
@@ -64,10 +64,11 @@ const FILE_TYPE_PDF = 'pdf'
const Base64 = require('js-base64').Base64
// 支持预览的文件类型
const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image']
// 本系统限制可以上传的文件格式
const CAN_UPLOAD_FILE_TYPE = 'pdf,docx,doc,xlsx,xls,ppt,rar,.zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad'
// 支持预览的文件后缀
const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv']
const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
const uidGenerator = () => {
return '-' + parseInt(Math.random() * 10000 + 1, 10)
}
@@ -94,7 +95,7 @@ export default {
fileType: {
type: String,
required: false,
default: FILE_TYPE_ALL
default: CAN_UPLOAD_FILE_TYPE
},
/* 这个属性用于控制文件上传的业务路径 */
bizPath: {
@@ -158,6 +159,14 @@ export default {
type: Boolean,
required: false,
default: true
},
beforeUpload: {
type: Function
},
fileMaxSize: {
type: Number,
required: false,
default: 500
}
},
watch: {
@@ -301,40 +310,62 @@ export default {
}
this.$emit('change', path)
},
beforeUpload (file) {
doBeforeUpload (file) {
this.uploadGoOn = true
file.uploadGoOn = true
const fileSize = file.size // 上传的文件大小
const fileType = file.type // 上传的文件类型
if (fileSize > 1024 * 1024 * 100) {
this.$message.warning('文件大小限制为100M')
if (fileSize === 0) {
this.$message.warning(this.$t('uploadFile.cannotUploadEmpty'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
console.log(this.fileType)
// 不等于全部类型可以上传的时候，对上传的文件进行判断
if (this.fileType !== FILE_TYPE_ALL) {
// filter(tt => fileType.indexOf(tt) > -1) 判断用户传的文件类型，和要求传的文件类型是否一致
// 当上传的图片格式为jpg时，在此组件中，会返回类型为 image/jpeg ElememntUI设计如此 所以需要把用户传下来的jpg强制改成jpeg
this.fileTypes = this.fileTypes.replace('jpg', 'jpeg')
const arr = this.fileTypes.split(',').filter(tt => fileType.indexOf(tt) > -1)
if (arr.length === 0) {
this.$message.warning(this.fileTypeErrorMessage || `请上传${this.fileTypes}文件`)
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
if (this.fileMaxSize && fileSize > 1024 * 1024 * this.fileMaxSize) {
this.$message.warning(this.$t('uploadFile.pleaseUpload') + this.fileMaxSize + this.$t('uploadFile.theFollowingDocuments'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
if (this.fileTypes === FILE_TYPE_IMG) {
if (fileType.indexOf('image') < 0) {
this.$message.warning('请上传图片')
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
if (fileSize > 1024 * 1024 * 500) {
this.$message.warning(this.$t('uploadFile.maxSize'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
if (this.fileType === FILE_TYPE_ALL) {
return true
}
const fileType = file.type
// 截取文件后缀名
const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase()
if (this.fileType === CAN_UPLOAD_FILE_TYPE && CAN_UPLOAD_FILE_TYPE.split(',').includes(fileSuffix)) {
return true
}
if (this.fileType === FILE_TYPE_IMG && fileType.indexOf('image') < 0) {
this.$message.warning(this.$t('uploadFile.onlyUploadPic'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
if (this.fileType === FILE_TYPE_IMG && FILE_TYPE_IMGS.includes(fileSuffix)) {
return true
}
if (this.fileType === FILE_TYPE_IMG && !FILE_TYPE_IMGS.includes(fileSuffix)) {
this.$message.warning(this.$t('uploadFile.pleaseUpload') + FILE_TYPE_IMGS.join('、') + this.$t('uploadFile.file'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
if (this.fileType.indexOf(fileSuffix) === -1) {
this.$message.warning(this.$t('uploadFile.pleaseUpload') + `${this.fileType}` + this.$t('uploadFile.file'))
this.uploadGoOn = false
file.uploadGoOn = false
return false
}
// 扩展 beforeUpload 验证
if (typeof this.beforeUpload === 'function') {
return this.beforeUpload(file)
}
// TODO 扩展功能验证文件大小
return true
},
handleChange (info) {
@@ -399,20 +430,20 @@ export default {
if (!file || !file.url) {
return
}
const fileType = file.type
// 截取文件后缀名
const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1].toLowerCase() : ''
const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix.toLowerCase() === tt)
const fileSuffix = (file.name ? file.name.split('.')[file.name.split('.').length - 1] : '').toLowerCase()
const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
// 判断是否为可预览格式的文件
if (!canPreview) {
this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
this.$message.loading(this.$t('uploadFile.cannotPreview')).then(() => {
this.handleDownload(file)
})
return
}
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
console.log(fileSuffix)
// 图片预览，使用自己添加的组件
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix)) {
if (FILE_TYPE_IMGS.includes(fileSuffix)) {
this.imageUrl = getFileAccessHttpUrl(file.response.result.id)
// 获取viewer实例
const viewer = this.$el.querySelector('.image').$viewer
@@ -422,13 +453,13 @@ export default {
return
}
// pdf预览
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
if (FILE_TYPE_PDF.includes(fileSuffix)) {
const url = previewPdf(file.response.result.id)
window.open(url)
return
}
// 其余可预览文件仍使用KKFile进行预览
const url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode(fileFullUrl))
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
window.open(url)
},
getFileUrl (fileId) {
src/views/documentTool/documentSplit/modules/ImportSplitResultModal.vue
+1 -1
View File
@@ -41,7 +41,7 @@
<!--拆分结果文件-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.split.splitResultFile')">
<div class="result-file-box">
<j-upload v-decorator="['splitFileId', validatorRules.splitFileId]" return-id :number="1" class="line-btn" />
<j-upload v-decorator="['splitFileId', validatorRules.splitFileId]" return-id :number="1" class="line-btn" file-type="zip,rar" />
<a-button class="line-btn" @click="downTemplate($t('docTool.split.documentSplitTemplate'), '.zip')">
{{ $t('templateDownload') }}
</a-button>