上传文件名加密

package-lock.json

@@ -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"
     },

package.json

@@ -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",

src/components/uploadComponentNewTwo/index.vue

@@ -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>

src/views/user/contract-manage/index.vue

@@ -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,