148 lines
5.1 KiB
Java
148 lines
5.1 KiB
Java
<template>
|
|
<div class="ocr-upload">
|
|
<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"
|
|
:before-upload="beforeUpload"
|
|
:remove='remove'
|
|
@change="handleChange">
|
|
<p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>
|
|
<p class="ant-upload-text" style="font-size: 14px;line-height: 30px">点击上传</p>
|
|
</a-upload-dragger>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
|
export default {
|
|
name: 'ocrUpload',
|
|
props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType'],
|
|
data(){
|
|
return{
|
|
visible:false,
|
|
uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
|
|
downLoadFileUrl:window._CONFIG['domianURL']+'/sys/common/static',
|
|
myfileList:[],
|
|
fileList:[],
|
|
fileTypeSatus:false,
|
|
headers:{},
|
|
title:'上传文件'
|
|
}
|
|
},
|
|
created(){
|
|
const token = Vue.ls.get(ACCESS_TOKEN);
|
|
this.headers = {"X-Access-Token":token};
|
|
this.containerId = 'container-ty-'+new Date().getTime();
|
|
},
|
|
mounted(){
|
|
// console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
|
|
},
|
|
methods:{
|
|
beforeUpload(file) {
|
|
console.log(file)
|
|
// let thisFileType = this.thisFileType.replace(/\s+/g, "");
|
|
this.fileTypeSatus = true;
|
|
this.$message.destroy()
|
|
// 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
|
|
this.errorMessage = file.name + "文件大小超出100MB限制, 请压缩或降低文件质量!";
|
|
|
|
},
|
|
remove(){
|
|
this.fileTypeSatus = true;
|
|
},
|
|
handleChange(info) {
|
|
console.log('info',info)
|
|
let { 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)
|
|
return
|
|
}else {
|
|
if (status === 'error') {
|
|
this.$emit('uploadSuccess', this.fileList)
|
|
this.$message.destroy()
|
|
this.$message.error(`${info.file.name} 文件上传失败。`);
|
|
} 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)
|
|
if(this.myfileList.length > 0){
|
|
this.$message.destroy()
|
|
this.$message.success(`${info.file.name} 删除成功。`);
|
|
}
|
|
} else if (status === 'done') {
|
|
this.fileList = []
|
|
this.myfileList = info.fileList;
|
|
console.log('file3333',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)
|
|
}
|
|
})
|
|
console.log('file1111',this.fileList)
|
|
this.$emit('uploadSuccess', this.fileList)
|
|
this.$message.destroy()
|
|
this.$message.error('最多只能上传二十个');
|
|
return
|
|
}
|
|
console.log('my222',this.myfileList)
|
|
this.myfileList.forEach((res) => {
|
|
if (res.response) {
|
|
this.fileList.push(res.response.result)
|
|
console.log('flist',res.response)
|
|
} else {
|
|
this.fileList.push(res)
|
|
}
|
|
})
|
|
|
|
if(this.myfileList.length > 0){
|
|
this.$emit('uploadSuccess', this.fileList)
|
|
this.$message.destroy()
|
|
this.$message.success(`${info.file.name} 文件上传成功。`);
|
|
}
|
|
} else if (status === 'uploading') {
|
|
this.myfileList = info.fileList;
|
|
this.$emit('uploadSuccess')
|
|
// this.$message.success(`${info.file.name} 文件上传成功。`);
|
|
}
|
|
}
|
|
}else{
|
|
this.$message.warning('不支持上传该类型的文件!')
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |