上传文件名加密
This commit is contained in:
parent
af28fdfd86
commit
0511ebef27
|
|
@ -18,7 +18,7 @@
|
|||
"element-plus": "^2.4.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"force": "^0.0.3",
|
||||
"js-base64": "^3.7.5",
|
||||
"js-base64": "^3.7.7",
|
||||
"mitt": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"nprogress": "^0.2.0",
|
||||
|
|
@ -3150,7 +3150,7 @@
|
|||
},
|
||||
"node_modules/js-base64": {
|
||||
"version": "3.7.7",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/js-base64/-/js-base64-3.7.7.tgz",
|
||||
"resolved": "https://mirrors.huaweicloud.com/repository/npm/js-base64/-/js-base64-3.7.7.tgz",
|
||||
"integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
"element-plus": "^2.4.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"force": "^0.0.3",
|
||||
"js-base64": "^3.7.5",
|
||||
"js-base64": "^3.7.7",
|
||||
"mitt": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"nprogress": "^0.2.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,316 @@
|
|||
<template>
|
||||
<div class="upload_ss_c">
|
||||
<!--action="/api/abk/web/v1/resource/file" -->
|
||||
<el-upload
|
||||
:action="props.actionUrl"
|
||||
:auto-upload="props.autoUpload"
|
||||
:headers="headerInfo"
|
||||
style="width: 100%"
|
||||
:on-success="(response:any, file:any) => successUpload(response, file)"
|
||||
:on-error="errorUpload"
|
||||
:accept="props.acceptTypeList.join(',')"
|
||||
:before-upload="beforeUpload"
|
||||
:multiple="false"
|
||||
:file-list="fileListNew"
|
||||
:disabled="props.disabledFlag"
|
||||
:on-change="changeFileFn"
|
||||
:on-remove="(file:any, fileList:any) => removeFile(file, fileList)"
|
||||
:on-preview="onPreview"
|
||||
:on-progress="(event:any, file:any, fileList:any) => onProgressFn(event, file, fileList)"
|
||||
:list-type="props.listType"
|
||||
>
|
||||
<!-- 上传的按钮 或者 icon 通过具名插槽的方式 -->
|
||||
<div>
|
||||
<slot name="default"></slot>
|
||||
</div>
|
||||
<slot name="textContent"></slot>
|
||||
</el-upload>
|
||||
<el-progress v-if="showProcessFlag && processFlag" :percentage="loadProcess"></el-progress>
|
||||
<el-dialog center width="90%" destroy-on-close v-model="previewDialogVisible">
|
||||
<el-image style="width: 100%; height: 50%" :src="previewDialogImageUrl" fit="cover" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Base64 } from 'js-base64' // 引入 Base64 库
|
||||
// import { Base64 } from 'js-base64'
|
||||
// const tmpUploadUrl = import.meta.env.VITE_API_URL + '/zlpt-file/file/cos/upload'
|
||||
import { mainStore } from 'store/main'
|
||||
const store = mainStore()
|
||||
const headerInfo = reactive({
|
||||
Authorization: store.token,
|
||||
})
|
||||
|
||||
const fileListNew: any = ref([])
|
||||
|
||||
const emit = defineEmits(['onFileChange'])
|
||||
const previewDialogVisible = ref(false)
|
||||
const previewDialogImageUrl = ref('')
|
||||
|
||||
// console.log('tmpUploadUrl', tmpUploadUrl)
|
||||
// const actionUrl = ref(tmpUploadUrl)
|
||||
const props = defineProps({
|
||||
fileListN: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
actionUrl: {
|
||||
//上传的地址
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
//上传的地址
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
//上传的地址
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
justifyContent: {
|
||||
//上传的地址
|
||||
type: String,
|
||||
default: 'center',
|
||||
},
|
||||
autoUpload: {
|
||||
//是否开启自动上传
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
acceptTypeList: {
|
||||
//接受的文件类型
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['.jpg', '.jpeg', '.png']
|
||||
},
|
||||
},
|
||||
multiple: {
|
||||
//是否开启多图上传
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maxLimit: {
|
||||
// 最大上传个数限制
|
||||
type: Number || String,
|
||||
default: 1,
|
||||
},
|
||||
minLimit: {
|
||||
// 最大上传个数限制
|
||||
type: Number || String,
|
||||
default: 1,
|
||||
},
|
||||
maxSize: {
|
||||
// 文件上传的最大体积 M
|
||||
type: Number || String,
|
||||
default: 10,
|
||||
},
|
||||
currentIndex: {
|
||||
// 文件上传的最大体积 M
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
disabledFlag: {
|
||||
//是否禁用
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
fileList: {
|
||||
//文件列表
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
listType: {
|
||||
type: String, //'text' | 'picture' | 'picture-card'
|
||||
default: 'picture',
|
||||
},
|
||||
extraData: {}, //上传时的额外参数 如 name等
|
||||
|
||||
/*
|
||||
{
|
||||
name:'12321'
|
||||
}
|
||||
*/
|
||||
dragFlag: {
|
||||
type: Boolean,
|
||||
default: true, //是否启用拖拽上传 此处默认启用 element 官方默认是 不启用的
|
||||
},
|
||||
downLoadTypeList: {
|
||||
//需要下载的文件类型
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['doc', 'docx', 'xlsx', 'xls', 'txt']
|
||||
},
|
||||
},
|
||||
preveiwTypeList: {
|
||||
//需要预览的文件类型
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['pdf', 'jpg', 'jpeg', 'png']
|
||||
},
|
||||
},
|
||||
officePreviewFlag: {
|
||||
//是否启用office在线预览
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showProcessFlag: {
|
||||
//是否显示进度条
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
scuccesCallback: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
successResultCallBack: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
// office预览
|
||||
// https://view.officeapps.live.com/op/view.aspx?src=
|
||||
// https://view.officeapps.live.com/op/view.aspx?src=文档地址
|
||||
//
|
||||
|
||||
const officeOnlineAddress = 'https://view.officeapps.live.com/op/view.aspx?src='
|
||||
const officeType = ['doc', 'docx', 'xlsx', 'xls']
|
||||
let processFlag = ref(false) //是否显示进度条
|
||||
let loadProcess = ref(0) //进度条的刻度值
|
||||
|
||||
// 加密文件名
|
||||
const encryptFileName = (fileName: string): string => {
|
||||
const parts = fileName.split('.');
|
||||
const name = parts.slice(0, -1).join('.');
|
||||
const extension = parts[parts.length - 1];
|
||||
// 加密文件名部分
|
||||
const encryptedName = Base64.encode(name);
|
||||
|
||||
// 返回加密后的文件名和原始扩展名
|
||||
return `${encryptedName}.${extension}`;
|
||||
}
|
||||
|
||||
// 上传图片 成功
|
||||
const successUpload = (response: any, file: any) => {
|
||||
console.log('successUpload', response, file)
|
||||
if (response.code === 200) {
|
||||
// props.fileList.push({
|
||||
// url: response.data,
|
||||
// name: file.name,
|
||||
// })
|
||||
// props.successResultCallBack(response)
|
||||
|
||||
const fileInfo = {
|
||||
uid: file.uid,
|
||||
}
|
||||
Object.assign(fileInfo, response.data)
|
||||
fileListNew.value.push(fileInfo)
|
||||
emit('onFileChange', fileListNew.value, props.currentIndex)
|
||||
|
||||
// console.log(fileListNew.value, '-----------3333333333333')
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: response.data,
|
||||
})
|
||||
}
|
||||
}
|
||||
const errorUpload = (res: any) => {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '上传失败请重试！',
|
||||
})
|
||||
}
|
||||
const beforeUpload = (file: any) => {
|
||||
console.log('file', file)
|
||||
|
||||
console.log(props.minLimit, '个数---')
|
||||
const { name = '', size } = file
|
||||
if (size > props.maxSize * 1024 * 1000) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: `文件大小不能超过${props.maxSize}M`,
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (fileListNew.value.length + props.minLimit >= props.maxLimit) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: `最多只能上传${props.maxLimit}个文件`,
|
||||
})
|
||||
return false
|
||||
}
|
||||
let names = name.split('.')
|
||||
let currentName = names[names.length - 1]
|
||||
console.log('acceptTypeListacceptTypeList', props.acceptTypeList, currentName)
|
||||
console.log('name.split().pop()')
|
||||
if (!props.acceptTypeList.includes('.' + currentName)) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: `文件格式仅支持${props.acceptTypeList.join(',')}`,
|
||||
})
|
||||
return false
|
||||
}
|
||||
console.log('beforeUpload',file.name)
|
||||
// 加密文件名
|
||||
const fileJm = encryptFileName(file.name)
|
||||
console.log('beforeUpload2',fileJm)
|
||||
// 创建一个新的 File 对象，使用加密后的文件名
|
||||
const newFile = new File([file], fileJm, { type: file.type });
|
||||
console.log('beforeUpload3',newFile.name)
|
||||
return newFile
|
||||
}
|
||||
const handleExceed = (files: any, fileList: any) => {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: `最多只能上传${props.maxLimit}个文件`,
|
||||
})
|
||||
}
|
||||
// 移除文件
|
||||
const removeFile = (file: any, data: any) => {
|
||||
fileListNew.value = fileListNew.value.filter((e: any) => e.uid != file.uid)
|
||||
emit('onFileChange', fileListNew.value, props.currentIndex)
|
||||
}
|
||||
// 预览
|
||||
const onPreview = (data: any) => {
|
||||
const { url: fileUrl } = data.response.data
|
||||
// previewDialogImageUrl.value = fileUrl
|
||||
window.open(fileUrl)
|
||||
// previewDialogVisible.value = true
|
||||
}
|
||||
|
||||
const onProgressFn = (event: any, file: any, fileList: any) => {
|
||||
processFlag.value = true
|
||||
loadProcess.value = event.percent.toFixed(2)
|
||||
if (loadProcess.value >= 100) {
|
||||
loadProcess.value = 100
|
||||
nextTick(() => {
|
||||
processFlag.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
const changeFileFn = (ev: any) => {
|
||||
props.scuccesCallback(ev)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-upload) {
|
||||
width: v-bind('props.width') !important;
|
||||
height: v-bind('props.height') !important;
|
||||
justify-content: v-bind('props.justifyContent');
|
||||
}
|
||||
:deep(.el-upload-list__item) {
|
||||
width: v-bind('props.width') !important;
|
||||
height: v-bind('props.height') !important;
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
@ -275,7 +275,7 @@
|
|||
<el-col :span="24">
|
||||
<el-form-item label="附件" prop="fileInfoList">
|
||||
<div style="flex: 1">
|
||||
<UploadComponentNew
|
||||
<UploadComponentNewTwo
|
||||
:maxSize="10"
|
||||
:max-limit="1"
|
||||
width="100%"
|
||||
|
|
@ -298,7 +298,7 @@
|
|||
>上传文件</el-button
|
||||
>
|
||||
</template>
|
||||
</UploadComponentNew>
|
||||
</UploadComponentNewTwo>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -324,7 +324,7 @@ import EditorModel from 'components/EditorModel/index.vue'
|
|||
import TableComponent from 'components/TableComponent/index.vue'
|
||||
import FormComponent from 'components/FormComponent/index.vue'
|
||||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||
import UploadComponentNew from 'components/uploadComponentNew/index.vue'
|
||||
import UploadComponentNewTwo from 'components/uploadComponentNewTwo/index.vue'
|
||||
import TitleTip from 'components/TitleTip/index.vue'
|
||||
import uploadComponent from 'components/uploadComponent/index.vue'
|
||||
import previewImg from './previewImg/index.vue'
|
||||
|
|
@ -513,6 +513,7 @@ const onDialogClose_2 = () => {}
|
|||
const onFileChange = (fileList: any) => {
|
||||
addAndEditForm.value.fileInfoTempList = []
|
||||
const fileListTemp = fileList.map((e: any) => {
|
||||
console.log('111111', e)
|
||||
return {
|
||||
fileName: e.name,
|
||||
fileUrl: e.url,
|
||||
|
|
|
|||
Loading…
Reference in New Issue