From b1135d2d4da8407e8f9cb2523ae1ce3b545c649b Mon Sep 17 00:00:00 2001 From: zjl Date: Fri, 20 Dec 2024 15:55:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=9A=E5=9B=BE=E3=80=81?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Upload/Images.vue | 82 ++++++++++++++++++-------------- src/components/Upload/file.vue | 82 ++++++++++++++++++-------------- 2 files changed, 91 insertions(+), 73 deletions(-) diff --git a/src/components/Upload/Images.vue b/src/components/Upload/Images.vue index a244446..1389ba4 100644 --- a/src/components/Upload/Images.vue +++ b/src/components/Upload/Images.vue @@ -51,11 +51,11 @@ import { ElNotification, UploadFile, UploadInstance } from 'element-plus'; import type { UploadProps, UploadRequestOptions } from 'element-plus'; import { Plus } from '@element-plus/icons-vue'; - import OSS from "ali-oss"; + import OSS from 'ali-oss'; import { generateUUID } from '@/utils/auth'; const uploadRef = ref(); - import { upload,getOssConfig } from '@/api/common'; + import { upload, getOssConfig } from '@/api/common'; // 接受父组件参数 const props = defineProps({ @@ -119,7 +119,11 @@ const emit = defineEmits(['upload']); const progress = ref(0); const loading = ref(false); - //接口上传 + + /** + * 本地文件上传 + * @param options 参数 + */ const handleHttpUpload = async (options: UploadRequestOptions) => { loading.value = true; try { @@ -167,29 +171,33 @@ loading.value = false; } }; - //oss上传 + + /** + * OSS文件上传 + * @param options 参数 + */ const handleHttpUploads = async (options: UploadRequestOptions) => { - const configData = await getOssConfig() + const configData = await getOssConfig(); let date = new Date(); let year = date.getFullYear(); let month: string | number = date.getMonth() + 1; - month = month < 10 ? ("0" + month) : month; + month = month < 10 ? '0' + month : month; let day: string | number = date.getDate(); - day = day < 10 ? ("0" + day) : day; + day = day < 10 ? '0' + day : day; let h: string | number = date.getHours(); - h = h < 10 ? ("0" + h) : h; + h = h < 10 ? '0' + h : h; let minute: string | number = date.getMinutes(); - minute = minute < 10 ? ("0" + minute) : minute; + minute = minute < 10 ? '0' + minute : minute; let second: string | number = date.getSeconds(); - second = second < 10 ? ("0" + second) : second; - let time = h + "" + minute + "" + second; - let fileName = (props.orderNo ? (time + '-' + props.orderNo) : time) + "-" + options.file.name - fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '') - let filePath = props.name + "/" + year + "/" + month + "/" + day + "/" + fileName; + second = second < 10 ? '0' + second : second; + let time = h + '' + minute + '' + second; + let fileName = (props.orderNo ? time + '-' + props.orderNo : time) + '-' + options.file.name; + fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, ''); + let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + fileName; loading.value = true; try { const headers = { - "Access-Control-Allow-Origin": "*" + 'Access-Control-Allow-Origin': '*', }; const client = new OSS({ // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。 @@ -201,13 +209,13 @@ accessKeySecret: configData.oss_accessKeySecret, // 填写Bucket名称。 bucket: configData.oss_bucketName, - timeout: 600000 + timeout: 600000, }); const res = await client.multipartUpload(filePath, options.file, { headers: headers, // 获取分片上传进度、断点和返回值。 progress: (p, cpt, res) => { - progress.value = parseFloat(parseFloat(p * 100).toFixed(2)) + progress.value = parseFloat(parseFloat(p * 100).toFixed(2)); options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) }); }, // 设置并发上传的分片数量。 @@ -215,36 +223,38 @@ // 设置分片大小。默认值为1 MB，最小值为100 KB。 partSize: 1024 * 1024, // headers, - mime: options.file.type + mime: options.file.type, }); - console.log(res) + console.log(res); + // 文件地址拼接 + const fileUrl = configData.oss_domain + res.name; if (props.multiple) { - let list = JSON.parse(JSON.stringify(props.fileList)) + let list = JSON.parse(JSON.stringify(props.fileList)); if (editIndex !== '') { list.splice(editIndex, 1, { - url:res.res.requestUrls[0], + url: fileUrl, name: options.file.name, - filePath: res.res.requestUrls[0], - fileName: options.file.name - }) - editIndex = '' + filePath: fileUrl, + fileName: options.file.name, + }); + editIndex = ''; } else { list.push({ - url: res.res.requestUrls[0], + url: fileUrl, name: options.file.name, - filePath: res.res.requestUrls[0], - fileName: options.file.name - }) + filePath: fileUrl, //res.res.requestUrls[0], + fileName: options.file.name, + }); } - emit('upload', list,props.zIndex) + emit('upload', list, props.zIndex); } else { - emit("upload", res.res.requestUrls[0], options.file.name, props.zIndex); + emit('upload', fileUrl, options.file.name, props.zIndex); } } catch (error) { ElNotification({ - title: "温馨提示", - message: "上传文件失败！", - type: "error" + title: '温馨提示', + message: '上传文件失败！', + type: 'error', }); if (props.multiple) { emit('upload', props.fileList, props.zIndex); @@ -254,10 +264,10 @@ } options.onError(error as any); } finally { - progress.value = 0 + progress.value = 0; loading.value = false; } -}; + }; const onPreview = (index: any) => { window.open(props.fileList[index].filePath); diff --git a/src/components/Upload/file.vue b/src/components/Upload/file.vue index 093b03d..00b5558 100644 --- a/src/components/Upload/file.vue +++ b/src/components/Upload/file.vue @@ -53,10 +53,10 @@ import { ElNotification, UploadFile, UploadInstance } from 'element-plus'; import type { UploadProps, UploadRequestOptions } from 'element-plus'; import { generateUUID } from '@/utils/auth'; - import OSS from "ali-oss"; + import OSS from 'ali-oss'; const uploadRef = ref(); - import { upload,getOssConfig } from '@/api/common'; + import { upload, getOssConfig } from '@/api/common'; // 接受父组件参数 const props = defineProps({ @@ -117,7 +117,10 @@ const loading = ref(false); - //接口上传 + /** + * 本地文件上传 + * @param options 参数 + */ const handleHttpUpload = async (options: UploadRequestOptions) => { loading.value = true; try { @@ -154,27 +157,32 @@ loading.value = false; } }; - //oss上传 + + /** + * OSS文件上传 + * @param options 参数 + */ const handleHttpUploads = async (options: UploadRequestOptions) => { - const configData = await getOssConfig() + const configData = await getOssConfig(); let date = new Date(); let year = date.getFullYear(); let month: string | number = date.getMonth() + 1; - month = month < 10 ? ("0" + month) : month; + month = month < 10 ? '0' + month : month; let day: string | number = date.getDate(); - day = day < 10 ? ("0" + day) : day; + day = day < 10 ? '0' + day : day; let h: string | number = date.getHours(); - h = h < 10 ? ("0" + h) : h; + h = h < 10 ? '0' + h : h; let minute: string | number = date.getMinutes(); - minute = minute < 10 ? ("0" + minute) : minute; + minute = minute < 10 ? '0' + minute : minute; let second: string | number = date.getSeconds(); - second = second < 10 ? ("0" + second) : second; - let time = h + "" + minute + "" + second; - let name = props.name + "/"+ year + "/" + month + "/" + day + "/" + time + "-" + options.file.name; + second = second < 10 ? '0' + second : second; + let time = h + '' + minute + '' + second; + let name = + props.name + '/' + year + '/' + month + '/' + day + '/' + time + '-' + options.file.name; loading.value = true; try { const headers = { - "Access-Control-Allow-Origin": "*" + 'Access-Control-Allow-Origin': '*', }; const client = new OSS({ // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。 @@ -186,46 +194,46 @@ accessKeySecret: configData.oss_accessKeySecret, // 填写Bucket名称。 bucket: configData.oss_bucketName, - timeout: 600000 + timeout: 600000, }); const res = await client.multipartUpload(name, options.file, { headers: headers, // 获取分片上传进度、断点和返回值。 progress: (p, cpt, res) => { - options.onProgress({percent: parseFloat(parseFloat(p * 100).toFixed(2))}); + options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) }); }, // 设置并发上传的分片数量。 parallel: 4, // 设置分片大小。默认值为1 MB，最小值为100 KB。 partSize: 1024 * 1024, // headers, - mime: options.file.type + mime: options.file.type, }); - if(props.multiple){ + if (props.multiple) { let list = JSON.parse(JSON.stringify(props.fileList)); - list.push({ - url: res.res.requestUrls[0], - name: options.file.name, - filePath: res.res.requestUrls[0], - fileName: options.file.name, - }); - emit('upload', list, props.zIndex); - }else{ - emit("upload", res.res.requestUrls[0],options.file.name, props.zIndex); + list.push({ + url: res.res.requestUrls[0], + name: options.file.name, + filePath: res.res.requestUrls[0], + fileName: options.file.name, + }); + emit('upload', list, props.zIndex); + } else { + emit('upload', res.res.requestUrls[0], options.file.name, props.zIndex); } } catch (error) { ElNotification({ - title: '温馨提示', - message: '上传文件失败！', - type: 'error', - }); - if (props.multiple) { - emit('upload', props.fileList, props.zIndex); - } else { - uploadRef.value!.clearFiles(); - emit('upload', '', '', props.zIndex); - } - options.onError(error as any); + title: '温馨提示', + message: '上传文件失败！', + type: 'error', + }); + if (props.multiple) { + emit('upload', props.fileList, props.zIndex); + } else { + uploadRef.value!.clearFiles(); + emit('upload', '', '', props.zIndex); + } + options.onError(error as any); } finally { loading.value = false; }