fix: 头像异常时无法一直Loading 无法裁剪

This commit is contained in:
dap
2025-04-05 16:51:24 +08:00
parent 78c16c1016
commit 84d6559f25
2 changed files with 15 additions and 3 deletions

View File

@@ -84,6 +84,10 @@ function handleReady(cropperInstance: Cropper) {
modalLoading(false);
}
function handleReadyError() {
modalLoading(false);
}
function handlerToolbar(event: string, arg?: number) {
if (event === 'scaleX') {
scaleX = arg = scaleX === -1 ? 1 : -1;
@@ -128,9 +132,11 @@ async function handleOk() {
v-if="src"
:circled="circled"
:src="src"
crossorigin="anonymous"
height="300px"
@cropend="handleCropend"
@ready="handleReady"
@ready-error="handleReadyError"
/>
</div>
@@ -322,7 +328,8 @@ async function handleOk() {
&-cropper {
height: 300px;
background: #eee;
background-image: linear-gradient(
background-image:
linear-gradient(
45deg,
rgb(0 0 0 / 25%) 25%,
transparent 0,

View File

@@ -26,14 +26,14 @@ const props = defineProps({
src: { required: true, type: String },
});
const emit = defineEmits(['cropend', 'ready', 'cropendError']);
const emit = defineEmits(['cropend', 'ready', 'cropendError', 'readyError']);
const defaultOptions: Options = {
aspectRatio: 1,
autoCrop: true,
background: true,
center: true,
checkCrossOrigin: true,
checkCrossOrigin: false,
checkOrientation: true,
cropBoxMovable: true,
cropBoxResizable: true,
@@ -94,6 +94,11 @@ async function init() {
if (!imgEl) {
return;
}
// 判断是否为正常访问的图片
const resp = await fetch(props.src);
if (resp.status !== 200) {
emit('readyError');
}
cropper.value = new Cropper(imgEl, {
...defaultOptions,
crop() {