haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员文件上传展示慢，以及bug问题解决

This commit is contained in:
jjLv 2024-09-14 12:13:18 +08:00
parent 307729a380
commit 304c10975e
2 changed files with 1191 additions and 1171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/base/staff.js
View File

@ -44,6 +44,15 @@ export function getPersonInfo(data) {
})
}
// 文件地址详情
export function getFileUrl(data) {
return request({
url: '/bracelet/person/getFileUrl',
method: 'post',
data: data
})
}
//证书详情
export function getCertificate(memberId) {
return request({

103
src/views/base/staff/index.vue
View File

@ -178,6 +178,7 @@
class = "upload-demo"
action="#"
:file-list="highImgList"
:key="uploadKey"
:show-file-list="true"
:auto-upload="false"
list-type="picture-card"
@ -224,6 +225,7 @@
class = "upload-demo"
action="#"
:file-list="electricianImgList"
:key="uploadKey"
:show-file-list="true"
:auto-upload="false"
list-type="picture-card"
@ -262,6 +264,7 @@
class = "upload-demo"
action="#"
:file-list="elseImgList"
:key="uploadKey"
:show-file-list="true"
:auto-upload="false"
list-type="picture-card"
@ -394,7 +397,7 @@
</template>
<script>
import { listPerson, addPerson, editPerson, getPersonInfo, delPerson, exportPerson, personFile,getCertificate,updateCertificate,pushFace} from "@/api/base/staff";
import { listPerson, addPerson, editPerson, getPersonInfo, delPerson, exportPerson, personFile,getCertificate,updateCertificate,pushFace,getFileUrl} from "@/api/base/staff";
import { downloadFile,downloadFileData } from '@/utils/download'
import { getToken } from '@/utils/auth'
import uploadFile from '../../components/uploadFile.vue'
@ -406,6 +409,7 @@
},
data() {
return {
uploadKey: Date.now(),
// 遮罩层
loading: true,
isSubmit: false,
@ -552,13 +556,17 @@
// 判断文件类型,图片预览，文件下载
updataIf(e) {
if (e.fileName) {
if (e.fileName.split('.')[1] === 'png' || e.fileName.split('.')[1] === 'jpeg' || e.fileName.split('.')[1] === 'jpg') {
const parts = e.fileName.split('.');
const extension = parts.pop();
if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
return false
} else {
return true
}
} else {
if (e.name.split('.')[1] === 'png' || e.name.split('.')[1] === 'jpeg' || e.name.split('.')[1] === 'jpg') {
const parts = e.name.split('.');
const extension = parts.pop();
if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
return false
} else {
return true
@ -566,17 +574,22 @@
}
},
handleDownload(file) {
console.log(file.url)
console.log(file)
if(file.status === 'ready'){
downloadFile({ fileName: file.name, fileData: file.raw, fileType: 'application/vnd.ms-excel;charset=utf-8' })
}else if(file.status === 'success'){
downloadFileData({ fileName: file.name,fileUrl:file.url })
getFileUrl({ filePath: file.fileId }).then(response => {
downloadFileData({ fileName: file.name,fileUrl: URL.createObjectURL(this.base64ToBlob(response.data.bast64Image)) })
})
// downloadFileData({ fileName: file.name,fileUrl:file.url })
}
},
//上传组件-图片查看
picturePreview(file) {
this.dialogImageUrl = file.url;
if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
const parts = file.name.split('.');
const extension = parts.pop();
if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
const windowName = file.name;
window.open(file.url,windowName)
}else{
@ -642,43 +655,39 @@
this.fileList = fileList;
},
handleChangeHighImgList(file, fileList) {
console.log(fileList.length)
if(fileList.length > 5){
this.$message.warning('最多上传5张图片')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
const fileListTemp = fileList.filter(item => {
return item.uid != file.uid
});
if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
const parts = file.name.split('.');
const extension = parts.pop();
if(fileList.length > 5){
this.$message.warning('最多上传5张证书')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}else if(!(extension === 'doc'||extension === 'docx'||extension === 'pdf' || extension === 'png' || extension === 'jpg' || extension === 'jpeg')){
this.$message.warning('文件格式不正确')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(file.size > 1024 * 1024 * 10){
}else if(file.size > 1024 * 1024 * 10){
this.$message.warning('文件大小不能超过10Mb')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(file.name.length > 40){
}else if(file.name.length > 40){
this.$message.warning('文件名长度不能超过40个字符')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(fileListTemp.some(item =>item.name === file.name)){
}else if(fileListTemp.some(item =>item.name === file.name)){
this.$message.warning('文件名重复')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
fileList.forEach(file=>{
if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
this.urlTemp = require('../../../assets/file.png');
}
@ -689,38 +698,36 @@
const fileListTemp = fileList.filter(item => {
return item.uid != file.uid
});
const parts = file.name.split('.');
const extension = parts.pop();
if(fileList.length > 5){
this.$message.warning('最多上传5张图片')
this.$message.warning('最多上传5张证书')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
}else if(!(extension === 'doc'||extension === 'docx'||extension === 'pdf' || extension === 'png' || extension === 'jpg' || extension === 'jpeg')){
this.$message.warning('文件格式不正确')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(file.size > 1024 * 1024 * 10){
}else if(file.size > 1024 * 1024 * 10){
this.$message.warning('文件大小不能超过10Mb')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(file.name.length > 40){
}else if(file.name.length > 40){
this.$message.warning('文件名长度不能超过40个字符')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(fileListTemp.some(item =>item.name === file.name)){
}else if(fileListTemp.some(item =>item.name === file.name)){
this.$message.warning('文件名重复')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
fileList.forEach(file=>{
if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
this.urlTemp = require('../../../assets/file.png');
}
@ -731,38 +738,36 @@
const fileListTemp = fileList.filter(item => {
return item.uid != file.uid
});
const parts = file.name.split('.');
const extension = parts.pop();
if(fileList.length > 5){
this.$message.warning('最多上传5张图片')
this.$message.warning('最多上传5张证书')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
}else if(!(extension === 'doc'||extension === 'docx'||extension === 'pdf' || extension === 'png' || extension === 'jpg' || extension === 'jpeg')){
this.$message.warning('文件格式不正确')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(file.size > 1024 * 1024 * 10){
}else if(file.size > 1024 * 1024 * 10){
this.$message.warning('文件大小不能超过10Mb')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(file.name.length > 40){
}else if(file.name.length > 40){
this.$message.warning('文件名长度不能超过40个字符')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(fileListTemp.some(item =>item.name === file.name)){
}else if(fileListTemp.some(item =>item.name === file.name)){
this.$message.warning('文件名重复')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
fileList.forEach(file=>{
if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
this.urlTemp = require('../../../assets/file.png');
}
@ -1010,6 +1015,7 @@
this.delHighFileIdList=[];
this.delElectFileIdList=[];
this.delElseFileIdList=[];
this.uploadKey = Date.now();
// this.showCertificate = true;
getCertificate(this.memberId).then(response => {
response.data.highImgList.forEach(item => {
@ -1018,7 +1024,7 @@
this.highImgList.push({
fileId: item.filePath,
raw:item.bast64Image,
url: URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
url: item.bast64Image == null ? '' : URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
name: item.fileName,
})
console.log(this.highImgList)
@ -1037,7 +1043,7 @@
this.electricianImgList.push({
fileId: item.filePath,
raw:item.bast64Image,
url: URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
url: item.bast64Image == null ? '' : URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
name: item.fileName
})
}else{
@ -1056,7 +1062,7 @@
this.elseImgList.push({
fileId: item.filePath,
raw:item.bast64Image,
url: URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
url: item.bast64Image == null ? '' : URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
name: item.fileName
})
}else{
@ -1079,6 +1085,7 @@
this.electricianImgList = []
this.elseImgList = []
this.showCertificate = false;
this.uploadKey = Date.now();
},
//提交证书上传
submitCertificate(){
@ -1125,9 +1132,13 @@
});
this.showCertificate = false;
this.uploadKey = Date.now();
},
}
},
// mounted(){
// this.uploadKey = Date.now();
// }
};
</script>