From 976e035a72f7f175e163d2496e20a3fcd1407778 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com> Date: Mon, 23 Dec 2024 11:27:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=B4=E5=83=8F=E8=A3=81=E5=89=AA=20oss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Cropper/src/CropperModal.vue | 67 ++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/src/components/Cropper/src/CropperModal.vue b/src/components/Cropper/src/CropperModal.vue index b2c8a16..96d7bf6 100644 --- a/src/components/Cropper/src/CropperModal.vue +++ b/src/components/Cropper/src/CropperModal.vue @@ -160,6 +160,8 @@ import CropperImage from './CropperImage.vue'; import { dataURLtoBlob, base64ToFile } from '@/utils/file/base64Conver'; import { isFunction } from '@/utils/is'; + import { getOssConfig } from '@/api/common'; + import OSS from 'ali-oss'; import { UploadOutlined, ReloadOutlined, @@ -237,8 +239,9 @@ } const uploadApi = props.uploadApi; const name = props.name + const file = base64ToFile(previewSource.value, filename); + //接口上传 if (uploadApi && isFunction(uploadApi)) { - const file = base64ToFile(previewSource.value, filename); try { setSubLoading(true); const formData = new FormData(); @@ -250,8 +253,70 @@ } finally { setSubLoading(false); } + } else { + //oss上传 + actionFiles(file) } } + /** + * 阿里云OSS上传 + * @param fileChild 参数 + */ + const actionFiles = async (fileChild: any) => { + 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; + let day: string | number = date.getDate(); + day = day < 10 ? '0' + day : day; + let h: string | number = date.getHours(); + h = h < 10 ? '0' + h : h; + let minute: string | number = date.getMinutes(); + minute = minute < 10 ? '0' + minute : minute; + let second: string | number = date.getSeconds(); + second = second < 10 ? '0' + second : second; + let time = h + '' + minute + '' + second; + let filterFileName = time + '-' + fileChild.name; + filterFileName = filterFileName.replace( + /[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, + '', + ); + let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + filterFileName; + setSubLoading(true); + try { + const headers = { + 'Access-Control-Allow-Origin': '*', + }; + const client = new OSS({ + // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。 + endpoint: configData.oss_endpoint, + // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。 + secure: true, + region: configData.oss_region, + accessKeyId: configData.oss_accessKeyId, + accessKeySecret: configData.oss_accessKeySecret, + // 填写Bucket名称。 + bucket: configData.oss_bucketName, + timeout: 600000, + }); + const res = await client.multipartUpload(filePath, fileChild, { + headers: headers, + // 设置并发上传的分片数量。 + parallel: 4, + // 设置分片大小。默认值为1 MB,最小值为100 KB。 + partSize: 1024 * 1024, + // headers, + mime: fileChild.type, + }); + emit('uploadSuccess', {fileUrl:configData.oss_domain + res.name}); + closeModal(); + } catch (error) { + emit('uploadSuccess', {}); + } finally { + setSubLoading(false); + } + }; function handleClose() { src.value = ''; previewSource.value = '';