优化裁剪OSS上传
This commit is contained in:
parent
976e035a72
commit
2f48077624
@ -173,6 +173,9 @@
|
|||||||
ZoomOutOutlined,
|
ZoomOutOutlined,
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义接收参数
|
||||||
|
*/
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: { type: String, default: '图片上传' },
|
title: { type: String, default: '图片上传' },
|
||||||
circled: { type: Boolean, default: false },
|
circled: { type: Boolean, default: false },
|
||||||
@ -193,6 +196,9 @@
|
|||||||
let scaleX = 1;
|
let scaleX = 1;
|
||||||
let scaleY = 1;
|
let scaleY = 1;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义模态
|
||||||
|
*/
|
||||||
const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
|
const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
|
||||||
title: props.title,
|
title: props.title,
|
||||||
width: 800,
|
width: 800,
|
||||||
@ -201,7 +207,10 @@
|
|||||||
// 自定义上传逻辑,这里暂时不做处理
|
// 自定义上传逻辑,这里暂时不做处理
|
||||||
}
|
}
|
||||||
|
|
||||||
// 上传图片
|
/**
|
||||||
|
* 上传图片
|
||||||
|
* @param file 文件
|
||||||
|
*/
|
||||||
const beforeUpload = async (file) => {
|
const beforeUpload = async (file) => {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
@ -214,6 +223,10 @@
|
|||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行裁剪
|
||||||
|
* @param param0 参数
|
||||||
|
*/
|
||||||
function handleCropend({ imgBase64 }: CropendResult) {
|
function handleCropend({ imgBase64 }: CropendResult) {
|
||||||
previewSource.value = imgBase64;
|
previewSource.value = imgBase64;
|
||||||
}
|
}
|
||||||
@ -232,16 +245,20 @@
|
|||||||
cropper?.value?.[event]?.(arg);
|
cropper?.value?.[event]?.(arg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行上传
|
||||||
|
*/
|
||||||
async function handleOk() {
|
async function handleOk() {
|
||||||
if (!src.value) {
|
if (!src.value) {
|
||||||
setSubLoading(false);
|
setSubLoading(false);
|
||||||
return message.error('请先上传图片');
|
return message.error('请先上传图片');
|
||||||
}
|
}
|
||||||
const uploadApi = props.uploadApi;
|
const uploadApi = props.uploadApi;
|
||||||
const name = props.name
|
const name = props.name;
|
||||||
const file = base64ToFile(previewSource.value, filename);
|
const file = base64ToFile(previewSource.value, filename);
|
||||||
//接口上传
|
// 文件上传
|
||||||
if (uploadApi && isFunction(uploadApi)) {
|
if (uploadApi && isFunction(uploadApi)) {
|
||||||
|
// 本地文件上传
|
||||||
try {
|
try {
|
||||||
setSubLoading(true);
|
setSubLoading(true);
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
@ -254,15 +271,16 @@
|
|||||||
setSubLoading(false);
|
setSubLoading(false);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
//oss上传
|
// OSS文件上传
|
||||||
actionFiles(file)
|
actionFiles(file);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 阿里云OSS上传
|
* 阿里云OSS上传
|
||||||
* @param fileChild 参数
|
* @param fileChild 参数
|
||||||
*/
|
*/
|
||||||
const actionFiles = async (fileChild: any) => {
|
const actionFiles = async (fileChild: any) => {
|
||||||
const configData = await getOssConfig();
|
const configData = await getOssConfig();
|
||||||
let date = new Date();
|
let date = new Date();
|
||||||
let year = date.getFullYear();
|
let year = date.getFullYear();
|
||||||
@ -309,7 +327,7 @@
|
|||||||
// headers,
|
// headers,
|
||||||
mime: fileChild.type,
|
mime: fileChild.type,
|
||||||
});
|
});
|
||||||
emit('uploadSuccess', {fileUrl:configData.oss_domain + res.name});
|
emit('uploadSuccess', { fileUrl: configData.oss_domain + res.name });
|
||||||
closeModal();
|
closeModal();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
emit('uploadSuccess', {});
|
emit('uploadSuccess', {});
|
||||||
@ -317,6 +335,10 @@
|
|||||||
setSubLoading(false);
|
setSubLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行关闭
|
||||||
|
*/
|
||||||
function handleClose() {
|
function handleClose() {
|
||||||
src.value = '';
|
src.value = '';
|
||||||
previewSource.value = '';
|
previewSource.value = '';
|
||||||
|
Loading…
Reference in New Issue
Block a user