头像裁剪 oss
This commit is contained in:
parent
b4a603cbec
commit
d2a3e73fd3
@ -15,7 +15,8 @@ VITE_DROP_CONSOLE = true
|
||||
|
||||
# 跨域代理,可以配置多个,请注意不要换行
|
||||
#VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
|
||||
VITE_PROXY=[["/api","http://192.168.124.203:8081/api"]]
|
||||
# VITE_PROXY=[["/api","http://192.168.124.203:8081/api"]]
|
||||
VITE_PROXY=[["/api","http://192.168.124.60:8081/api"]]
|
||||
|
||||
# API 接口地址
|
||||
VITE_GLOB_API_URL =
|
||||
|
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<basicModal ref="modalRef" class="cropperModal" @register="modalRegister" @on-ok="handleOk" @on-close="handleClose">
|
||||
<basicModal
|
||||
ref="modalRef"
|
||||
class="cropperModal"
|
||||
@register="modalRegister"
|
||||
@on-ok="handleOk"
|
||||
@on-close="handleClose"
|
||||
>
|
||||
<template #default>
|
||||
<div class="cropper-box">
|
||||
<div class="cropper-box-left">
|
||||
@ -184,8 +190,10 @@
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import CropperImage from './CropperImage.vue';
|
||||
import { dataURLtoBlob,base64ToFile } from '@/utils/file/base64Conver';
|
||||
import { dataURLtoBlob, base64ToFile } from '@/utils/file/base64Conver';
|
||||
import { isFunction } from '@/utils/is';
|
||||
import OSS from 'ali-oss';
|
||||
import { getOssConfig } from '@/api/common';
|
||||
import {
|
||||
UploadOutlined,
|
||||
ReloadOutlined,
|
||||
@ -262,24 +270,85 @@
|
||||
return message.error('请先上传图片');
|
||||
}
|
||||
const uploadApi = props.uploadApi;
|
||||
const name = props.name
|
||||
const name = props.name;
|
||||
const file = base64ToFile(previewSource.value, filename);
|
||||
//接口上穿
|
||||
if (uploadApi && isFunction(uploadApi)) {
|
||||
const file = base64ToFile(previewSource.value, filename);
|
||||
console.log(file)
|
||||
try {
|
||||
setSubLoading(true);
|
||||
const formData = new window.FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('name', name);
|
||||
console.log(formData)
|
||||
const result = await uploadApi(formData);
|
||||
emit('uploadSuccess', result);
|
||||
closeModal();
|
||||
} 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 = '';
|
||||
|
Loading…
Reference in New Issue
Block a user